аватар Автор: Сергей Касаткин | 18 сентября 2013 12:28

Статьи / JavaScript /

Исчезающий текст в поле input и textarea на JavaScript


Вы, наверное, часто видите регистрационные формы на сайте, где нужно ввести свои данные. Зачастую, вместо подписи рядом с полем, в самих 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 достаточно просто. Спасибо за внимание!
 



Похожие статьи


Комментарии к статье (vk.com)