Главная > Вебмастеринг > Подсказки в поле ввода (placeholder) для INPUT и TEXTAREA

Подсказки в поле ввода (placeholder) для INPUT и TEXTAREA

Подсказки, которые отображаются обычно серым цветом внутри INPUT или TEXTAREA, довольно распространнены сейчас.

Это удобный способ показать пользователю, что необходимо вводить в данное поле.

Логика работы таких подсказок проста. При получение элементом фокуса — подсказка пропадает. Когда поле теряет фокус, то если поле осталось пустым — подсказка вновь показывается.

Спецификация HTML5 описывает атрибут placeholder для тэгов INPUT или TEXTAREA, который как раз задаёт текст для подсказки. Пример:

<input type="text" name="query" value="" />

На данный момент атрибут placeholder поддерживают только браузеры на основе движка webkit (Google Chrome, Safari).

Для того, чтобы наш атрибут заработал в остальных популярных браузерах — напишем небольшой скрипт на jQuery.

jQuery(function($) {
 $('#addr')
  .focus(function(){if ($(this).val() == 'Address') {$(this).val('');} })
  .blur(function(){if ($(this).val() == '') {$(this).val('Address');} })

});

На input нужно добавть id-ишник плюс добавить свойство value с значением подсказки.

Если у вас сломалась МКПП — http://www.ремонт-мкпп.рф/remont-mkpp-toyota.aspx. Широкий комплекс услуг по восстановлению и диагностике коробок.


Комментарии:

Об авторе: admin