Вы, наверное, часто видите регистрационные формы на сайте, где нужно ввести свои данные. Зачастую, вместо подписи рядом с полем, в самих input просто есть исчезающий в выделении input текст. Например, есть поле, а в нём светло серым цветом подписано Введите email. Соответственно при выделении поля текст пропадает. Как это сделать?
Для этого воспользуемся встроенным языком сценариев JavaScript и запишем прямо в тег input:
Код HTML и JavaScript
<input type="text" name="email" style="color: #777;" value="Введите email" onfocus="if (this.value == 'Введите email') {this.value = ''; this.style.color = '#000';}" onblur="if (this.value == '') {this.value = 'Введите email'; this.style.color = '#777';}" />Сразу смотрим пример работы кода.
Теперь рассмотрим принцип работы. В качестве примера просим пользователя заполнить поле с email. При загрузке страницы в поле уже есть слова Введите email, а при выделении поля они пропадают. За выделение поля отвечает обработчик события onfocus. Если при выделении там есть Введите email, то стираем слова и устанавливаем уже не серый, а чёрный цвет текста. Если же там всё-таки что-то введено, то оставляем как есть (введённый текст и чёрный текст).
Далее используем событие onblur, которое отвечает за значение текстового поля. Если оно пустое, то устанавливаем Введите email.
 | Напоминаю, два знака = (==) обозначают соответствие другому значению, а один (=) обозначает присвоить ему новое. Будьте внимательны! |
Как создать исчезающий текст в поле ввода textarea JS?
В textarea не поддерживает value, но зато поддерживает placeholder. Работаем именно с этим атрибутом.
<textarea placeholder="Ваше сообщение" onfocus="placeholder='';" onblur="placeholder='Ваше сообщение';" ></textarea>
Как видите, сделать исчезающий текст в input и textarea достаточно просто. Спасибо за внимание!
