Возвращаем подсказки в форму

Недавно при верстке одного проекта заказчик попросил сделать следующую фишку:

В форме регистрации каждое поле имеет текст по умолчанию (подсказка, что именно нужно в это поле ввести).
Нужно при клике в это поле или переходе по ТАВ очищать это поле, но, если пользователь ничего не ввел — вернуть подсказку обратно.

Реализовать эту задачу нам поможет jQuery и небольшой скрипт.

$(document).ready(function(){ 
 // для каждого элемента lable имеющего атрибут class со значением hint выполняем следующие действия 
 $('label.hint').each(function() { 
 var label = $(this); 
 // получаем элемент input у которого атрибут id совпадает с атрибутом for у элемента label 
 var input = $('#' + label.attr('for')); 
 //прячем элемент label и устанавливаем переменную initial равной тексту элемента label без двоеточия 
 var initial = label.hide().text().replace(':', ''); 
 // устанавливаем обработчики событий focus и blur для элемента input 
 input.focus(function() { 
 //если текст в поле ввода это наша подсказка, то по получению фокуса очищаем input 
 if (input.val() == initial) { 
 input.val(''); 
 } 
 }).blur(function() { 
 //если ничего не введно в поле ввода, то при удалении фокуса помещаем нашу подсказку 
 if (input.val() == '') { 
 input.val(initial); 
 } 
 //в поле ввода помещаем нашу подсказку 
 }).val(initial); 
 }); 
 });
Запись опубликована в рубрике Старые посты с метками , , , . Добавьте в закладки постоянную ссылку.

3 комментария: Возвращаем подсказки в форму

  1. Виктор говорит:

    А placeholder тег не покатит?:)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *