Атрибут placeholder и плагин jQuery-Placeholder

Атрибут placeholder и плагин jQuery-Placeholder

При работе с формами, часто приходится делать замещающийся текст. Это может служить подсказкой, ну или просто элементом украшающим дизайн форм.
Такой текст отображается до того,как поле получит фокус.
Вот как это делается чаще всего:

<div class="search">
	<input name="searchword" id="mod_search_searchword" maxlength="21" alt="Искать" class="inputbox" type="text" size="21" value="Поиск..." onblur="if(this.value=='') this.value='Поиск...';" onfocus="if(this.value=='Поиск...') this.value='';">	
	<input type="submit" value="Искать" class="button" onclick="this.form.searchword.focus();">	
</div>

добавляются онлайновые события JS прямо в теге вода.
Вот пример того как это выглядит.

Но HTML 5 принёс нам много сюрпризов и один из них — атрибут placeholder. А значение этого атрибута и используется для замещающего текста.
Современные браузеры уже поддерживают атрибут placeholder, ну а для остальных существуют плагины jQuery, один из них который мы сегодня рассмотрим это jQuery-Placeholder.

Шаг 1. Подключение библиотек

Скачать скрипт jquery placeholder можно в конце статьи.

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

Шаг 2. HTML разметка формы.

В качестве значения, атрибуту placeholder задаём нужный нам текст.

<form>
	<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>

Шаг 3. Инициализация скрипта placeholder

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

Шаг 4. Стили CSS

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

Для остальных браузеров, скрипт присваивает замещающемуся тексту класс placeholder.

::-webkit-input-placeholder {
	color: #999;
}
:-moz-placeholder {
	color: #999;
}
.placeholder {
	color: #999;
}
comments powered by Disqus
Subscribe to RSS Feed Следить в Twitter