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

jQuery-Placeholder — замещающийся текст
просмотров: 637415 октября 2013 года

При верстке форм достаточно часто приходится реализовывать замещающийся текст. Такой текст-подсказка отображается в поле ввода до того, как это поле получит фокус. Как только фокус получен — текст исчезает. Основная сложность при этом — снабдить таким текстом поле для ввода пароля (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

Что качать?

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

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

<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 с нужным значением.
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/jquery.placeholder.min.js"></script>
Инициализируем скрипт:
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" (если этой кнопки на форме нет — недостатком не считается).

Материал:

Метки: HTML,javascript
Поделиться

Что скажем?