У HTML5 для реалізації цього, є чудовий атрибут placeholder. який задає текст-підказку всередині елементів введення.
Пишеться він у такий спосіб:
Текст, заданий за допомогою placeholder. автоматично зникає при отриманні фокусу цим полем введення. Але на жаль далеко не всі браузери розуміють даний атрибут. Тому, щоб placeholder був кросбраузерності, доводиться використовувати спеціальні плагіни, написані на jQuery.
Про один з таких плагінів у нас і піде мова в цій статті. І що у нас вийти на виході, ви можете подивитись, натиснувши на кнопку «подивитися демо».
Крок 1 - Створюємо HTML-форму
Спершу я створив звичайну форму, на прикладі якої ми і буде розбирати роботу даного плагіна. Зауважте, що placeholder можна задавати не тільки для текстових полів введення, а й для полів введення пароля, текстових областей і т.д.
Крок 2 - Підключаємо плагін Placeholder jQuery
Далі нам необхідно підключити бібліотеку jQuery і власне сам плагін jQuery Placeholder (їх ви можете скачати з додаткових матеріалів, вони лежать в папці js).
Крок 3 - ініціалізувавши плагін
Тепер, щоб у нас все запрацювало, инициализируем підключений раніше плагін:
Якщо ви все зробили правильно, то тепер старі браузери, також як і сучасні, почнуть розуміти атрибут placeholder.
Завдання стилів для placeholder за допомогою CSS
За замовчуванням, текст заданий за допомогою атрибута placeholder, виводиться сірим кольором. Але якщо вам раптом знадобитися це змінити, то для кожного браузера потрібно застосувати свій підхід.
Наприклад, для браузерів Chrome і Safari використовується псевдоклас :: - webkit-input-placeholder. для Firefox 18 і більш ранніх версій -: -moz-placeholder. а для Firefox 19+ використовується вже інший псевдоклас :: - moz-placeholder. ну і для IE10 -: -ms-input-placeholder.
Для старих браузерів, плагін автоматично задає заміщає тексту клас placeholder і тим самим, ви легко можете управляти його зовнішнім виглядом.
Тобто, CSS стилі можуть виглядати так:
Зауважте, що правила для кожного з псевдокласів задаються окремо, тому що групувати їх не можна.
І ще що хотілося відзначити наостанок, так це проблема з браузером Opera 11. бо в ньому, ми не можемо стилізувати placeholder. тому в даному браузері просто немає відповідного псевдокласу.