Как сделать пропадающий текст при клике в строку поиска

Как сделать пропадающий текст при клике в строку поиска

Меня давно волновал вопрос: как разработчики сайтов делают такой эффект - смотришь на строку поиска, там написано найти. Кликаешь туда мышкой и надпись пропадает. Сегодня мы научимся делать тоже самое.

Сейчас я покажу вам, как сделать "умную" строку поиска, в которой будет пропадать текст-подсказка при клике в поле поиска. Получится что-то типа:

Здорово, правда? Как это реализовать? Очень просто. Дело в том, что у тега input (а строка поиска или строка текста создается именно с помощью него) есть атрибут value, который и отвечает за значение строки по-умолчанию. Но если мы просто зададим это значение, то получим следующее:

<input type="text" value="Поиск:">

При клике в область строки текст не пропадает! Такой вариант нас не устраивает! Придется дописать простенькую функцию на javascript, которая будет изменять value при получении строкой фокуса - то есть при клике в нее. Итак, сразу приведу полный код:

<input type="text" value="Поиск:" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">

Теперь намного лучше:

Но я хочу, чтобы текст подсказки был серый, а когда мы печатали в строке поиска - черный. Этого можно добиться с помощью css. Для этого запишите в стилях следующее:

input[type=text] {
    color:#999;
}
input[type=text]:focus {
    color:#000;
}

Теперь все в порядке:

04.04.17
Для просмотра сайта обновите браузер.