Placeholder HTML5 и его использование

Все, наверняка, видели подсказывающий текст в поле формы, который пропадает, как только установить курсор в это поле. Это очень экономит место, поскольку не надо подписывать каждое поле формы слева. Сегодня мы рассмотрим два способа создания данной фишки: старый (с помощью JavaScript) и новый (с помощью html5). И очередной раз восхитимся технологиями будущего 🙂

Как было

До появления html5, подобную фичу можно было реализовать только использую JavaScript. На input вешались обработчики событий onfocus и onblur, срабатывающее, соответственно, при приобретении и потере фокуса текстовым полем. Выглядело это очень громоздко.

Например, вот так:

<input type="text" name="s" id="s" value="Тру-поиск :)"

onfocus="document.forms['searchform'].s.value='';"
onblur="if (document.forms['searchform'].s.value == '')
document.forms['searchform'].s.value='Тру-поиск :)';"/>

Этот код используется у нас на блоге, думаю, понятно где.

В DLE это реализуется вот так:

<input name="story" type="text"
class="logininp" value="Поиск →"

onfocus="if(this.value=='Поиск →'){this.value='';}"
onblur="if(this.value==''){this.value='Поиск →';}" />

Используя jQuery, можно упростить жизнь верстальщику и вынести весь JavaScript-код из html, храня текст подсказки в каком-нибудь атрибуте, назовём его placeholder, например. То есть бедолаге, никак не желающему не только разбираться в JavaScript, но и видеть посторонний код при работе, останется только написать:

<input type="text" name="s" id="s" placeholder="Тру-поиск :)" />

JavaScript код для реализации такой возможности будет выглядеть примерно так:

$(document).ready(function () {
	$("input[type=text]").each(function() {

		$(this).val($(this).attr("placeholder"));
	});
	$("input[type=text]").focus(function() {

		if ($(this).attr("placeholder") == $(this).val())
			$(this).val("");

	});
	$("input[type=text]").blur(function() {
		if ($(this).val() == "")

			$(this).attr("value", $(this).attr("placeholder"));
	});

});

Как будет

Если браузер пользователя поддерживает html5, то для реализации placeholder‘a JavaScript вообще не нужен. Пишем:

<input type="text" name="s" id="s" placeholder="Тру-поиск :)" />

и всё работает!

Стоит напоследок заметить, что не будет ничего плохого, если браузер поддерживает html5 и для реализации placeholder‘a используется JavaScript. Такой вариант реализации будет кроссбраузерным.

  • Дмитрий

    Хороший кастыль)