Взгляд на HTML5-атрибут-заполнитель
Одна из моих любимых новинок в HTML5 - возможность добавлять Текст заполнителя без труда. Текст-заполнитель - это серый текст, который вы найдете в поле ввода и который служит для подсказки пользователям о том, какой ввод ожидается в этом поле. Как только пользователи начнут вводить вход поле, этот текст исчезнет.
В старые времена мы обычно делаем это с JavaScript, следующее;
В этой практике нет ничего плохого, но на HTML5 все проще.
HTML5 ввел новый атрибут с логическим именем; заполнитель. Вот пример:
Если мы просмотрим его в браузерах, то теперь у ввода должен быть серый текст, как показано ниже;
Несколько вещей, которые следует отметить: согласно спецификации, заполнитель атрибут не должен использоваться в качестве альтернативы этикетка и также предлагается, чтобы этот атрибут применялся только к вход типы, которые требуют текста, например. текст, пароль, поиск, Эл. адрес, TextArea а также телефон.
Добавление заполнитель к вход типы: радио а также флажок не будет иметь никакого значения.
Заполнитель & CSS
Кроме того, стилизация текста-заполнителя с помощью CSS также возможна, но на момент написания этой статьи по-прежнему ограничивается только браузерами Firefox и Webkit..
В следующем примере показано, как мы изменяем текст заполнителя на зеленый как в Webkit, так и в Firefox;
input :: - webkit-input-placeholder цвет: зеленый; input: -moz-placeholder цвет: зеленый;
Просто чтобы вспомнить, хотя, :: - WebKit-вход-заполнитель а также : -Moz-заполнитель повлияет только на текст и не может быть написано параллельно.
input :: - webkit-input-placeholder, вход: -moz-placeholder цвет: зеленый;
Этот кусок кода не будет работать.
Выбор атрибутов
CSS3 также пришел поддержать этот атрибут, введя [Заполнитель] селектор атрибутов;
input [placeholder] border: 1px solid green;
В приведенном выше примере мы выбираем каждый вход это имеет заполнитель приписать и изменить границу на зеленый.
Совместимость браузера
Эта новая особенность HTML5 неудивительно, что не поддерживается в старых браузерах и в настоящее время полностью поддерживается только в: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 а также Internet Explorer 10 (который еще не был официально выпущен).
Заполнитель Polyfills
Тем не менее, если нам нужно отобразить заполнитель в старых браузерах, но при этом использовать заполнитель атрибут, мы можем использовать Polyfills. Есть много Заполнитель Polyfills там, но в этом примере мы будем использовать PlaceMe.js;
PlaceMe.js, как вы можете видеть из фрагмента кода выше, зависит от jQuery. Теперь, если мы рассмотрим это, например, в Internet Explorer 9, все вводимые данные должны теперь отображать текст-заполнитель..
- Посмотреть демо
- Скачать исходный код
Последняя мысль
HTML5 Placeholder Атрибут, безусловно, облегчает добавление текста-заполнителя. Теперь мы, веб-разработчики и дизайнеры, должны выбрать, какой метод использовать: JavaScript или HTML5..
Если вы считаете, что использование Polyfills и jQuery для поддержки старых браузеров является избыточным, то JavaScript, очевидно, больше подходит для этой работы. Но если вы можете спокойно игнорировать старые браузеры, то использование HTML5 Placeholder, вероятно, является лучшим способом..
