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

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

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

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

<input type="text" name="query" value="" placeholder="Поиск по сайту...">

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

Сразу приведу сам скрипт, а потом объясню как это работает :)

$(document).ready(function(){
	
	if (!$.browser.webkit) {
		
		$('INPUT[placeholder], TEXTAREA[placeholder]').blur(function(){ 
			
			if ($(this).val()=='') {
				$(this).val($(this).attr('placeholder'));
				$(this).addClass('m-placeholder');
			}
			
		}).focus(function(){
			
			$(this).removeClass('m-placeholder');
			if ($(this).val()==$(this).attr('placeholder'))
				$(this).val('');
			
		}).each(function(){
			
			if ( ($(this).val()=='') || ($(this).val()==$(this).attr('placeholder')) ) {
				$(this).val( $(this).attr('placeholder') );
				$(this).addClass('m-placeholder');
			}
			
			var form = $(this).closest('FORM');
			if (form.length)
				form.submit(function(){
					if ($(this).val()==$(this).attr('placeholder'))
						$(this).val('');
				});
			
		});
		
	}
	
});

Для начала определяем семейство браузеров и не выполняем наш скрипт для браузеров основанных на webkit. Используем для этого функцию jQuery - $.browser.webkit, которая возвращает true в случае, если браузер принадлежит к семейству webkit.

Теперь отбираем все INPUT или TEXTAREA, содержащие атрибут placeholder, и задаём действия на события focus (получение фокуса) и blur (потеря фокуса).

При потере элементом фокуса смотрим - если ничего не введено, то в качестве значения устанавливаем подсказку и добавляем класс m-placeholder (используется для того, чтобы задать цвет подсказки).

При получении элементом фокуса - удаляем класс m-placeholder и если содержимое элемента - наша подсказка, то делаем поле ввода пустым.

В CSS задать цвет для placeholder можно вот так:

INPUT::-webkit-input-placeholder { color: #c8c8c8; }
TEXTAREA::-webkit-input-placeholder { color: #c8c8c8; }
.m-placeholder { color: #c8c8c8; }

Первые две строчки задают цвет подсказки для webkit-браузеров, последняя - для всех остальных.

Действия заданы. Теперь перебираем каждый элемент (each) и если изначально ничего не введено или значение равно подсказке, то добавляем к элементу класс m-placeholder и показываем подсказку.

И последнее. При отправке формы, если в поле ничего не введено, то нужно отправлять пустое значение, а не текст подсказки, для этого вешаем на событие submit формы необходимое действие. Функция closest('FORM') находит форму, в которой находится наш элемент.

PS Для INPUT, имеющего type="password", описанный выше скрипт будет работать не корректно - подсказка будет отображена звездочками.