Раньше для решения этой задачи мы были вынуждены прибегать к javascript:
<input type="text" value="Placeholder text"
onfocus="if(this.value=='Placeholder text')this.value='';"
onblur="if(this.value=='')this.value='Placeholder text';">
В этом нет ничего неправильного, но с появлением HTML5 наша задача сильно облегчилась.
В HTML5 нам был представлен новый атрибут с логическим названием: placeholder (заглушка). Давайте рассмотрим пример:
<input type="text" placeholder="Placeholder Text">
Если мы откроем его через браузеры, поле ввода будет обозначено серым текстом, как видно на изображении ниже:
Здесь важно отметить несколько моментов: следуя спецификации, атрибут placeholder не должен использоваться в качестве альтернативы ярлыку, и также рекомендуется, что этот атрибут должен быть применен к типам полей, которые требуют ввода текста, например: ввода пароля, строка поиска, ввод адреса электронной почты, текстовое поле, а также поле ввода телефона.
Применение этого атрибута к типам ввода вроде радио-кнопки или чекбокса не даст никакого результата.
Placeholder и CSS
Более того, посредством CSS возможно оформление текста-заглушки, но на момент написания данного руководства эта возможность распространялась только на браузеры семейства Webkit и Firefox.
Следующий пример показывает, как изменить цвет текста-заглушки на зеленый для браузеров семейства Webkit и Firefox:
input::-webkit-input-placeholder {
color: green;
}
input:-moz-placeholder {
color: green;
}
Только важно запомнить, что ::-webkit-input-placeholder и :-moz-placeholder будет создавать эффект только на текст, и их нельзя использовать параллельно.
input::-webkit-input-placeholder, input:-moz-placeholder {
color: green;
}
Такой код работать не будет.
Селектор атрибута
CSS3 также поддерживает этот атрибут, предоставляя нам селектор атрибута [placeholder].
input[placeholder] {
border: 1px solid green;
}
В вышеприведенном примере мы выбираем все поля ввода, где имеется атрибут placeholder, и изменяем цвет границы на зеленый.
Совместимость с браузерами
Это новое HTML5-свойство, что не удивительно, не поддерживается в старых браузерах, и на данный момент работает только в Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 и Internet Explorer 10 (который пока еще не вышел официально).
Placeholder Polyfills
Тем не менее, если нам нужно отобразить placeholder в старых браузерах, но также иметь возможность использовать атрибут placeholder, мы можем воспользоваться Polyfills. Существует множество Placeholder Polyfills, но в данном примере мы воспользуемся PlaceMe.js:
<script src="jquery.js" type="text/javascript"></script>
<script src="placeme.js" type="text/javascript"></script>
PlaceMe.js, как видно из вышеприведенного отрывка кода, зависим от jQuery. Теперь, если мы взглянем на него через, скажем, Internet Explorer 9, все поля ввода должны быть оформлены заглушкой.
Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
В завершение
HTML5-атрибут Placeholder безусловно облегчает задачу. Теперь все зависит от нас, веб-разработчиков и дизайнеров. Теперь у нас есть выбор между javascript или HTML5.
Если вы считаете, что будет лишним использовать Polyfills и jQuery для создания поддержки заглушек, то без проблем можете применить javascript. Но если вы можете со спокойной душой игнорировать устаревшие браузеры, то лучше всего будет использовать HTML5 placeholder.