Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   focus не работает (https://javascript.ru/forum/dom-window/36906-focus-ne-rabotaet.html)

Alina25 31.03.2013 17:02

focus не работает
 
Подскажите пожалуйста, в чем ошибка. Есть два блока, блок с поиском, и блок с всплывающей подсказкой, который по умолчанию на видимый и должен появляться под блоком с поиском, только при событии фокус. .vvod - блок с поиском, .word - подсказка
Но не работает!(

HTML код:
<form class="fo">
<input class="vvod" type="text">
<input class="but" type="image" src="img/button.png">
</form>

<div class="word"></div>

Css код:
.word{background:url(img/word.png) no-repeat; width:400px; height:45px; display:none;}
.vvod{width:287px; height:22px; margin-top:7px; margin-left:12px; border:white; display:block; float:left; font-size:95%; color:#797979;
}


Скрипт:
<script>
document.getElementByClass('vvod').onfocus = function() {
document.geteElementByClass('word').style.display = 'inline';
}
</script>

danik.js 31.03.2013 17:10

Цитата:

Сообщение от Alina25
getElementByClass

Че за метод? Где о нем узнали?
Цитата:

Сообщение от Alina25
geteElementByClass

Зажмите Ctrl и покрутите колесиком мыши вверх.

Alina25 31.03.2013 18:05

HTML код:
<form class="fo">
<input id="vvod" type="text">
<input class="but" type="image" src="img/button.png">
</form>

<div id="word"></div>

Css код:
#word{background:url(img/word.png) no-repeat; width:400px; height:45px; display:none;}
#vvod{width:287px; height:22px; margin-top:7px; margin-left:12px; border:white; display:block; float:left; font-size:95%; color:#797979;
}


Скрипт:
<script>
document.getElementById('vvod').onfocus = function() {
document.geteElementById('word').style.display = 'block';
}
</script>
Все равно не работает

Alina25 31.03.2013 18:11

*
Скрипт:
<script>
document.getElementById('vvod').onfocus = function() {
document.getElementById('word').style.display = 'block';
}
</script>

danik.js 31.03.2013 18:34

Почему. Все работает как и задумывалось:
<style>
#word{
    /*background:url(img/word.png) no-repeat;*/
    background: rgba(0,0,255,0.2);
    width:400px;
    height:45px;
    display:none;
}
#vvod{
    width:287px;
    height:22px;
    margin-top:7px;
    margin-left:12px;
    border:white;
    display:block;
    float:left;
    font-size:95%;
    color:#797979;
}
</style>

<form class="fo">
<input id="vvod" type="text">
<input class="but" type="button" value="Жоп" />
</form>

<div id="word">Подсказка</div>
<script>
document.getElementById('vvod').onfocus = function() {
    document.getElementById('word').style.display = 'block';
}
</script>

Alina25 31.03.2013 18:50

Подсказка не срабатывает, даже на вашем примере. Возможно дело в браузере?

Alina25 31.03.2013 19:14

и onfocus должен был срабатывать в области для ввода текста... а не при нажатии на кнопку

danik.js 31.03.2013 19:48

Ставлю курсор в поле ввода - появляется подсказка. Работает в хроме и лисе точно.

Alina25 01.04.2013 12:31

Спасибо! Уже все работает! Подскажите пожалуйста, кто-нибудь, где можно промотреть примеры реализации подобного скрипта, но с использованием class вместо id

danik.js 01.04.2013 12:53

document.querySelector('.vvod')


Часовой пояс GMT +3, время: 03:29.