От автора: я использую атрибут placeholder у тега input в двух случаях: (1) когда мне нужно создать метку для простых форм, где есть всего несколько полей ввода (2) когда мне нужно создать подсказки в сложных формах.
Вся проблема с данным атрибутом заключается в том, что он не поддерживается в IE 9 и ниже. А это очень неприятно, если вы используете данный атрибут вместо тега label…
|
1 |
<input type="email" name="email" placeholder="Your email address" /> |
JavaScript полифилл
Я написал небольшой jQuery плагин, который активирует возможность использовать данный атрибут в тех браузерах, которые его не поддерживают:
jquery.input-placeholder-polyfill.js (в несжатом виде: 2 KB);
jquery.input-placeholder-polyfill.min.js (минифицированный: 966 bytes).
Простой пример использования:
|
1 2 3 4 5 6 7 8 9 |
<script src="jquery.js"></script> <script src="jquery.input-placeholder-polyfill.js"></script> <script> ;( function( $, window, document, undefined ) { $( 'input' ).inputPlaceholderPolyfill(); } )( jQuery, window, document ); </script> |
Или же вы можете выбрать нужные поля ввода, используя соответствующие селекторы:
|
1 |
$( '.textfield' ).inputPlaceholderPolyfill(); |
Плагин позаботится о тегах textarea и текстовых полях ввода, включая поля для ввода пароля. В некоторых других полифиллах, которые я пробовал использовать до этого, был обнаружен баг, который заключался в том, что когда вы вводите текст, который совпадает со значением атрибута placeholder у поля ввода, то содержимое поля ввода автоматически очищается, становится пустым. Данный баг исправлен в моем полифилле.
Как же плагин работает? Сначала он определяет, поддерживает ли браузер данную технологию. Затем, если значение placeholder у input не является пустым, то плагин устанавливает такое же значение для атрибута value и добавляет класс для тега input (по умолчанию это класс is-placeholder). Плагин также осуществляет различные проверки и действия, реагируя на события focus, blur у поля ввода и событие submit у формы, чтобы значения атрибутов placeholder и value всегда были правильными.
Зачем нам нужен класс is-placeholder? Во-первых, он используется для стилизации поля ввода, когда включен режим поддержки атрибута placeholder. Всего лишь одна дополнительная строчка кода, сразу за стилями для нативного атрибута placeholder:
|
1 2 3 4 |
.textfield.is-placeholder { color: grey !important; } .textfield::-webkit-input-placeholder { color: grey !important; } .textfield::-moz-placeholder { color: grey !important; } .textfield:-ms-input-placeholder { color: grey !important; } |
Во-вторых, он служит для управления полем ввода через JavaScript. Классическим примером является валидация значений полей ввода. Поскольку плагин использует атрибут value для подстановки текста из атрибута placeholder, вы должны быть уверены, что вы осуществляете валидацию нужного значения (которое вводит пользователь, а не которое было подставлено из атрибута placeholder):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$( 'form' ).on( 'submit', function( e ) { e.preventDefault(); $( this ).find( '.textfield' ).each( function() { var $this = $( this ), val = $this.val(); if( $this.hasClass( 'is-placeholder' ) ) val = ''; // ... }); // ... }); |
Если вам нужно, то вы можете использовать свой класс:
|
1 2 3 4 |
$( '.textfield' ).inputPlaceholderPolyfill( { className: 'textfield--placeholder' }); |
Но… что делать с браузерами, которые не поддерживают атрибут placeholder и в которых выключен JavaScript?
Запасной вариант на CSS (фолбэк)
Вы можете использовать оба варианта: JavaScript полифилл и CSS фолбэк. Или вы можете не использовать часть на JavaScript и полностью положиться на CSS фолбэк. Или наоборот. Все зависит от вашей ситуации. В конечном счете, главное, чтобы посетители вашего сайта могли им пользоваться.
CSS фолбэк в качестве дополнения к JavaScript полифиллу
В отличие от JavaScript, на CSS невозможно определить поддержку атрибута placeholder. Единственное, что нам остается, – это определение конкретных браузеров – в данном случае IE 9 и ниже.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!--[if lte IE 9]> <html lang="en" class="no-js no-placeholder"> <![endif]--> <!--[if gt IE 9]><!--> <html lang="en"> <!--<![endif]--> <head> <!-- ... --> <script> // убирает класс "no-js" из элемента <html>; уберите данный скрипт, если вы пользуетесь Modernizr, т.к. он сам сделает тоже самое за вас ;( function( window, document ) { document.documentElement.className = document.documentElement.className.replace( 'no-js', 'js' ); } ( window, document ) ); </script> </head> <!-- ... --> |
Теперь нам необходимо продублировать текст из атрибута placeholder и обернуть его в некоторые теги:
|
1 2 3 4 |
<div class="item"> <input type="email" name="" value="" placeholder="Email" class="textfield" id="input-email" /> <label for="input-email">Email</label> </div> |
И, конечно же, сделать текст видимым, когда это необходимо:
|
1 2 3 4 |
html.no-placeholder.no-js .item label { display: block; } |
CSS фолбэк в качестве единственного решения
Не используя JavaScript полифилл и применяя только CSS фолбэк, вы проследуете путем, похожим на тот, что я описал до этого. Единственным отличием будет то, что здесь вы не будете использовать тег script!:
|
1 2 3 4 5 6 |
<!--[if lte IE 9]> <html lang="en" class="no-placeholder"> <![endif]--> <!--[if gt IE 9]><!--> <html lang="en"> <!--<![endif]--> html.no-placeholder .item label { display: block; } |
Демо-пример
Я объединил все подходы в демо-примере. Не стесняйтесь изучить исходный код и использовать данное решение в своих проектах. Вам следует посмотреть демо-пример в браузерах, которые не поддерживают атрибут placeholder, например, IE 9 и ниже.
Автор: Osvaldas Valutis
Источник: //osvaldas.info/
Редакция: Команда webformyself.
