Изменение текста в поле Input с помощью jQuery. (Placeholder, Focus)

Author Автор: Роман Чернышов    Опубликовано: 25 мая 2012

Одним очень удобным свойством HTML форм, а именно текстовых полей является поддержка атрибута Placeholder. Этот атрибут позволяет задать произвольный текст, который будет отображаться в поле и исчезать про фокусе на нем. Таким образом получается нечто своеобразной подсказки для пользователя о назначении данного поля. Но увы, не все браузеры поддерживают данный атрибут для полей, тегов INPUT и TEXTAREA, а лишь Chrome, Opera 11.5>, Safari 5>, FireFox 4>, IE всех версий вообще его не поддерживает(как всегда).

Пример HTML кода:

<textarea placeholder="Ваше сообщение"></textarea>

Ввиду чего приходится реализовывать данное свойство своими силами, с помощью jQuery. Для этого написан специальный скрипт на JS, принцип работы которого весьма прост, он обходит все элементы с указанным классом и подставляет значение указанное в атрибуте rel, словно это атрибут placeholder.

Пример JS (с использованием библиотеки jQuery):

jQuery(document).bind('ready', function(event) {
 jQuery('.placeholder').each(function(i) {
 
 var item = jQuery(this);
 var text = item.attr('rel');
 var form = item.parents('form:first');
 
 if (item.val() === '')
 {
 item.val(text);
 item.css('color', '#888');
 }
 
 item.bind('focus.placeholder', function(event) {
 if (item.val() === text)
 item.val('');
 item.css('color', '');
 });
 
 item.bind('blur.placeholder', function(event) {
 if (item.val() === '')
 {
 item.val(text);
 item.css('color', '#888');
 }
 });
 
 form.bind("submit.placeholder", function(event) {
   if (item.val() === text)
   item.val("");
   });
 });
 });

При этом HTML будет выглядеть след. образом:

// HTML
<input type="text" name="email" class="placeholder" rel="Ваше сообщение"/>

Надеюсь данная заметка с примером вам пригодиться, благодарю за внимание.

Оставить комментарий

Автор блога
Чернышов Роман
Роман Чернышов
Веб-разработчик, Full Stack
Senior, Architector
PHP, JavaScript, Node.JS, Python, HTML 5, CSS 3, MySQL, Bash, Linux Admin
Заказать работу
предложить оффер

Последние вопросы
Список вопросов
Последние комментарии
Меню

Archive

Мои проекты
Insurance CMS Love Crm CMS Совместные покупки Мой PHP Framework Хостинг для моих клиентов Лицензии на мой софт и поддержка