Полифилл для атрибута placeholder

14

Від автора: я використовую атрибут placeholder у тега input у двох випадках: (1) коли мені потрібно створити мітку для простих форм, де є всього декілька полів вводу (2) коли мені потрібно створити підказки у складних формах.

Вся проблема з цим атрибутом полягає в тому, що він не підтримується IE 9 і нижче. А це дуже неприємно, якщо ви використовуєте даний атрибут замість тега label…

Полифилл для атрибута placeholder

JavaScript полифилл

Я написав невеликий jQuery плагін, який активує можливість використовувати даний атрибут в тих браузерах, які його не підтримують:

jquery.input-placeholder-polyfill.js (у стислому вигляді: 2 KB);

jquery.input-placeholder-polyfill.min.js (минифицированный: 966 bytes).

Простий приклад використання:

;( function( $, window, document, undefined )
{
$( ‘input’ ).inputPlaceholderPolyfill();
}
)( jQuery, window, document );

Або ж ви можете вибрати потрібні поля введення, використовуючи відповідні селектори:

$( ‘.textfield’ ).inputPlaceholderPolyfill();

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

Як же плагін працює? Спочатку він визначає, чи підтримує браузер дану технологію. Потім, якщо значення placeholder у input не є порожнім, то плагін встановлює таке ж значення для атрибуту value і додає клас для тега input (за замовчуванням це клас is-placeholder). Плагін також здійснює різні перевірки і дії, реагуючи на події focus, blur у поля введення і подія submit у форми, значення атрибутів placeholder і value завжди були правильними.

Навіщо нам потрібен клас is-placeholder? По-перше, він використовується для стилізації поля вводу, коли включений режим підтримки атрибуту placeholder. Всього лише одна додаткова рядок коду, відразу за стилями для нативного атрибута placeholder:

.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):

$( ‘form’ ).on( ‘submit’, function( e )
{
e.preventDefault();
$( this ).find( ‘.textfield’ ).each( function()
{
var $this = $( this ),
val = $this.val();
if( $this.hasClass( ‘is-placeholder’ ) )
val = «;
// …
});
// …
});

Якщо вам потрібно, то ви можете використовувати свій клас:

$( ‘.textfield’ ).inputPlaceholderPolyfill(
{
className: ‘textfield—placeholder’
});

Але… що робити з браузерами, що не підтримують атрибут placeholder і в яких вимкнений JavaScript?

Запасний варіант на CSS (фолбэк)

Ви можете використовувати обидва варіанти: JavaScript полифилл і CSS фолбэк. Або ви можете не використовувати частину на JavaScript і повністю покластися на CSS фолбэк. Або навпаки. Все залежить від вашої ситуації. Зрештою, головне, щоб відвідувачі сайту могли ним користуватися.

CSS фолбэк в якості доповнення до JavaScript полифиллу

На відміну від JavaScript, CSS неможливо визначити підтримку атрибута placeholder. Єдине, що нам залишається, – це визначення конкретних браузерів – в даному випадку IE 9 і нижче.