Не так давно у меня спросили, как сделать исчезающий текст в input . То есть чтобы изначально было некое слово написано в текстовом поле (какая-нибудь подсказка, например), а при клике оно стиралось. При этом ещё чтобы и менялся цвет , то есть был изначально бледно-серный, а текст, который вводит пользователь, стано...
Не так давно у меня спросили, как сделать исчезающий текст в input. То есть чтобы изначально было некое слово написано в текстовом поле (какая-нибудь подсказка, например), а при клике оно стиралось. При этом ещё чтобы и менялся цвет, то есть был изначально бледно-серный, а текст, который вводит пользователь, становился чёрным. Вот как такое сделать, мы с Вами разберём в этом материале.
В основе лежит достаточно простой JavaScript, который можно уместить прямо в самом теге input:
<input type="text" name="name" style="color: #777;" value="Ваше имя" />
Поясняю алгоритм. Вначале у нас в поле серым цветом написано "Ваше имя". При получении фокуса на это поле вызывается обработчик события onfocus, в котором мы проверяем, если значение поля равно "Ваше имя", мы его стираем, плюс устанавливаем чёрный цвет. Если там написано что-то другое (пользователь ранее написал), то ничего не делаем.
При потере фокуса вызывается onblur, в котором мы смотрим значение текстового поля, и если оно пустое, то устанавливаем "Ваше имя" и ставим серый цвет.
Я стоит Вам просто скопировать данный код и посмотреть на его работу, чтобы Вы поняли, как он действует, а уже, поняв его работу, разобраться в данном алгоритме не составит никакого труда.
Вот таким нехитрым образом делается исчезающий текст в input.
