jQuery-Placeholder — замещающийся текст

Автор: Александр и Татьяна Головко Дата публикации:

При верстке форм достаточно часто приходится реализовывать замещающийся текст. Такой текст-подсказка отображается в поле ввода до того, как это поле получит фокус. Как только фокус получен — текст исчезает. Основная сложность при этом — снабдить таким текстом поле для ввода пароля (input type=password). Загвоздка в том, что это поле отображает свое содержимое звездочками (оно и понятно — кому понравится, если браузер «спалит» пароль!). Проблемам размещения надписи на этом поле посвящена статья Текст в поле type="password".

Но, к счастью, прогресс не стоит на месте и долгожданный HTML5 принес нам новые возможности в том числе и в этом вопросе — речь об атрибуте placeholder. Значение этого атрибута как раз и будет использоваться в качестве замещающегося текста. Ряд прогрессивных браузеров уже поддерживают этот атрибут. А для остальных есть js-плагины. Такие как, например, jQuery-Placeholder (автор Daniel Stocks).

Демо-пример — с обычным текстовым полем, полем ввода пароля и textarea.

Проверено в:

IE 6-8
Firefox 3-4
Opera 9.5-10.6
Safari 5
Chrome

Что качать?

Библиотеку jquery качаем или загружаем с Google;
Cам плагин jquery.placeholder.js (4.11 Kb) или его запакованную версию jquery.placeholder.min.js (1.79 Kb);

Быстрый старт

Подключаем библиотеки:

<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/jquery.placeholder.min.js"></script>

HTML — обычная форма. Для элементов управления, которым необходим замещающийся текст, задаем атрибут placeholder с нужным значением.

<form action="#" method="post">
	<div>
		<input type="text" placeholder="Логин" name="username">
	</div>
	<div>
		<input type="password" placeholder="Пароль" name="password">
	</div>
	<div>
		<textarea placeholder="Введите текст" name="text"></textarea>
	</div>
	<div>
		<input type="submit" value="Отправить" />
	</div>
</form>

Инициализируем скрипт:

jQuery('input[placeholder], textarea[placeholder]').placeholder();

Вот и все. Браузеры, непонимающие атрибут placeholder, теперь заметно поумнели.

Placeholder и CSS

Осталась самая малость — хочу применять к замещаемому тексту стили.

У разных браузеров для этого есть свои механизмы. Например -webkit- браузеры используют вендорный псевдоэлемент ::-webkit-input-placeholder, а Firefox — вендорный псевдоэлемент :-moz-placeholder.

Об остальных браузерах позаботился автор плагина. Скрипт присваивает замещающемуся тексту класс placeholder. Так что стили могут выглядеть, например, так:

::-webkit-input-placeholder {
	color: #999;
	font:14px Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
}
:-moz-placeholder {
	color: #999;
	font:14px Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
}
.placeholder {
	color: #999;
	font:14px Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
}

Хотя блок объявлений у всех трех правил одинаков, сгруппировать селекторы не получится. Правила для псевдоклассов нужно задавать отдельно.

Сюрпризы от Оперы

Отдельно хочется упомянуть про забавный курьез, связанный с Opera 11. Этот браузер (в отличие от более ранних версий) понимает атрибут placeholder, но не имеет соответствующего вендорного псевдоэлемента. Да и не вендорного тоже. Так что стили, относящиеся к классу .placeholder Opera 11 без надобности — в эмуляции placeholder она не нуждается. А вот настроить внешний вид отличный от по-умолчанию серенькой надписи не получится. Никаких :-o-placeholder или просто :placeholder, по крайней мере пока, не предусмотрено!

Еще одна неприятность опять таки связана с Opera 11 — в этом браузере placeholder срабатывает только для input, а для textarea — нет.

Ложка дегтя напоследок

В некоторых формах встречается кнопка «Очистить» (input type="reset") суть которой — сбросить все, что пользователь вводил в поля. Так вот, браузеры, понимающие placeholder после очистки полей выводят замещаемый текст. А вот браузеры, научившиеся понимать placeholder с помощью рассматриваемого плагина, оставят поля пустыми.

Плюсы:

нормально работает во всех популярных браузерах;
легкий по весу и простой в использовании;
адекватно работает с полем пароля.

Минусы:

неадекватная обработка кнопки input type="reset" (если этой кнопки на форме нет — недостатком не считается).

Материал:

jquery plugin :: jQuery-Placeholder

По теме

Замещающийся текст из книги Марка Пилгрима "HTML5. Up and Running"

Xiper