Перегляньте атрибут HTML5 заповнювача
Один з моїх улюблених новинок в HTML5 - це можливість додавати Текст заповнювача легко. Текст-заповнювач - це сірий текст, який ви знайдете у полі вводу, який використовується для натяку користувачам про те, який вхід очікується в цьому полі. Після того, як користувачі почнуть вводити текст у введення поле, цей текст зникне.
У давні часи ми часто це робимо з JavaScript, наступним чином;
У цій практиці немає нічого поганого, але це простіше в HTML5.
HTML5 представив новий атрибут з логічним іменем; заповнювач. Ось приклад:
Якщо ми переглянемо його у браузерах, вхід повинен тепер мати сірий текст, як показано нижче;
Кілька речей, які слід відзначити: відповідно до специфікації, заповнювач атрибут не слід використовувати як альтернативу a етикетці також пропонується, щоб цей атрибут застосовувався лише до введення типи, які вимагають тексту, наприклад. текст, пароль, пошук, електронною поштою, textarea і тел.
Додавання заповнювач до введення типи: радіо і прапорець не буде ніякої різниці.
Заповнювач і CSS
Більш того, стилізація тексту заповнювача через CSS також можлива, але на момент написання цього тексту все ще обмежується лише браузерами Firefox і Webkit..
Наступний приклад показує, як ми змінюємо текст заповнювача на зелений як у Webkit, так і у Firefox;
input :: - webkit-input-placeholder колір: зелений; input: -moz-placeholder колір: зелений;
Тільки пам'ятати, хоча :: - webkit-input-placeholder і : -moz-placeholder вплине лише на текст і не може бути записано паралельно.
input :: - webkit-input-placeholder, вхід: -moz-placeholder color: green;
Цей код не працюватиме.
Селектор атрибутів
CSS3 також прийшов на підтримку цього атрибута шляхом введення [заповнювач] селектор атрибутів;
input [placeholder] border: 1px зелене;
У наведеному вище прикладі ми вибираємо кожен введення що має заповнювач атрибут і змінити кордон на зелений.
Сумісність браузера
Ця нова функція HTML5 не дивно підтримується в старих веб-переглядачах і наразі підтримується лише повністю: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 і Internet Explorer 10 (який ще не був офіційно випущений).
Заповнювач поліфілів
Тим не менш, якщо нам потрібно відобразити заповнювач у старих браузерах, але все одно зможе використовувати заповнювач атрибут, ми можемо використовувати Polyfills. Є багато Заповнювач поліфілів там, але в цьому прикладі ми будемо використовувати PlaceMe.js;
PlaceMe.js, як видно з фрагмента коду вище, залежить від jQuery. Тепер, якщо ми переглянемо його, наприклад, в Internet Explorer 9, усі введені дані тепер повинні відображати текст заповнювача.
- Переглянути демонстрацію
- Завантажити джерело
Заключна думка
The Заповнювач HTML5 атрибут, звичайно, полегшує додавання тексту заповнювача. Тепер саме від нас, веб-розробників і дизайнерів, потрібно вибрати, який метод використовувати: JavaScript або HTML5.
Якщо ви вважаєте, що використання Polyfills і jQuery для підтримки старих браузерів є зайвими, то JavaScript, очевидно, більше підходить для завдання. Але якщо ви можете мирно ігнорувати старі браузери, то, можливо, краще використовувати HTML5 Placeholder.
