Просмотров: 3 543

Как стереть содержимое текстового поля в форме при клике по нему первый раз.

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

Хотелось бы, чтобы содержимое этого поля имело значение «Ваш email», но при перемещении фокуса в это поле, содержимое сразу же исчезало. При этом важно, если пользователь ничего в это текстовое поле не вводил, то первоначальное значение восстанавливается.

Посмотрите, как это работает здесь:

Это очень удобно для пользователя.

Давайте рассмотрим, как это можно осуществить.

На самом деле все очень просто, решение – пару строк Javascript-кода.

<input type="input" value="Ваш email" onfocus="if (this.value == 'Ваш email') {this.value=''}" onBlur="if (this.value == '') {this.value='Ваш email'}">

Событие onfocus определяет, если элемент получает фокус и первоначальное значение не изменялось, то текстовое поле будет очищено.

Событие onBlur, при потере фокуса текстовым полем, проверяет, если пользователь ничего не вводил в него, то будет восстановлено первоначальное значение.

Используйте этот код в своих формах, чтобы повысить удобство для пользователя.

  • Семен

    За код спасибо) но есть вопрос, разместил на сайте форму, так там получается,сначала пустое окно, а повялвяется надпись введите ваш емэй только если несколько раз кликнуть

    • admin

      Можете дать ссылку, чтобы посмотреть, как это работает?

  • Михаил

    placeholder=»текст»
    при нажатии текст сотрется