HTML5 атрибут placeholder

Часто во время верстки форм можно встретиться с задачей размещения названия полей внутри самих полей. При получении фокуса, это поле очищается, давая возможность пользователю вводить данные. Раньше реализовать это можно было только  используя JavaScript. Но с появлением HTML5 у нас появилась возможность достичь того же эффекта используя атрибут placeholder.

[codesyntax lang=»html4strict» title=»HTML»]

<input placeholder="Введите Email" type="email" />

[/codesyntax]

Но, к сожалению, есть небольшие проблемы при использовании данного атрибута.

1. Применение CSS стилей для подсказок

По умолчанию браузеры отображают текст подсказки серым цветом, а шрифт  соответствует заданным для самого поля. Для смены стилей можно воспользоваться следующим кодом:

[codesyntax lang=»css» title=»CSS»]

::-webkit-input-placeholder { /* для webkit браузеров */
	color: #000;
	font-style: italic;
}
:-moz-placeholder { /* для браузеров mozilla */
	color: #000;
	font-style: italic;
}

[/codesyntax]

Но для остальных браузеров поменять стили нельзя. Также могут возникнуть проблемы с позиционированием подсказок…

2. Кроссбраузерность

Атрибут placeholder в той или иной степени поддерживается всеми современными браузерами (на момент написания данной статьи). IE 9 и ниже этот атрибут не поддерживают. Для того, чтобы это исправить я рекомендую использовать jQuery HTML5 Placeholder Plugin. Конечно же подключать плагин для всех брауров не имеет смысла, поэтому можно вставить его подключение и инециализацию в условные комментарии:

[codesyntax lang=»html4strict» title=»HTML»]

<!--[if lt IE 10]>
	<script type="text/javascript" src="jquery.placeholder.js"></script>
	<script type="text/javascript" >
	        $(function(){
	            $('input[placeholder], textarea[placeholder]').placeholder();
	        })
	</script>
<![endif]-->

[/codesyntax]

Если же инициализацию потребуется выполнить внутри программы, то можно проверить, существует ли функция placeholder() и только после этого ее инициализировать:

[codesyntax lang=»javascript» title=»JavaScript»]

if(typeof $.fn.placeholder == 'function')
                $('input[placeholder], textarea[placeholder]').placeholder();

[/codesyntax]

Запись опубликована в рубрике HTML/CSS, JavaScript/JQuery с метками , , . Добавьте в закладки постоянную ссылку.

Один комментарий: HTML5 атрибут placeholder

  1. nedudi says:

    Вот здесь есть несколько трюков и примеров http://html5.by/blog/placeholder для стилизации placeholder

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *