Реализация свойства Placeholder и Required в IE9
Быстрый ответ
Для включения поддержки placeholder'ов в IE9, воспользуйтесь JavaScript-полифиллом, который эмулирует эту функциональность. Вот пример скрипта, который можно использовать:
if (!('placeholder' in document.createElement('input'))) {
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
(function(input) {
var placeholderText = input.getAttribute('placeholder');
if (placeholderText) {
input.value = placeholderText;
input.onfocus = function() { if (this.value === placeholderText) this.value = ''; };
input.onblur = function() { if (this.value === '') this.value = placeholderText; };
input.onblur();
}
})(inputs[i]);
}
}
Данный код добавляет функциональность placeholder'а для поля ввода в IE9.
Совместимость функций
Для обеспечения надёжной поддержки placeholder'ов во всех браузерах применяйте ответственную стратегию детектирования возможностей и резервных решений:
- Используйте Modernizr для проверки наличия поддержки атрибута placeholder:
if (!Modernizr.input.placeholder) {
// здесь можно разместить полифилл
}
- Примените HTML5 Placeholder jQuery Plugin от Mathias Bynens для комплексного решения задачи:
$('input, textarea').placeholder();
- Отслеживайте динамические изменения содержимого, применяя полифилл в ответ на события, которые взаимодействуют с DOM:
$(document).on('DOMNodeInserted', function(e) {
$(e.target).find('input, textarea').placeholder();
});
Эстетика и удобство использования
Улучшайте удобство работы с placeholderом с помощью визуальной оптимизации и дополнительных функций:
- Создавайте CSS-классы для имитации placeholder'ов в браузерах без основной поддержки этих элементов.
- Обеспечивайте очистку placeholder'ов перед отправкой формы, чтобы избежать их попадания в данные формы.
- Подключайте полифилл только в необходимых версиях IE, используя условные комментарии, для оптимизации производительности.
- Для обеспечения согласованности в различных браузерах используйте механизм изменения классов.
Обработка элементов формы
Для улучшения взаимодействия с формой, необходимо учитывать все её элементы:
- Расширьте функциональность placeholder'а до элементов textarea.
- Настройте события в зависимости от потребностей пользователя и сложности формы.
- Продумывайте доступность и удобство использования, обеспечивая простоту и понятность работы с placeholderом.
Визуализация
Вот пример отображения placeholder'а в IE9:
// Представим "placeholder" как 🎭 (маску).
В случае отсутствия поддержки в IE9:
IE9: [😶] (без маски, без placeholder'а)
Применение решения:
Опробуйте всемогущий JavaScript для добавления placeholder'а в IE9:
if (!('placeholder' in document.createElement('input'))) {
// JavaScript поможет создать 🎭 для input-элементов в IE9.
}
Теперь IE9 распознаёт:
IE9: [🎭] (Маска надета! Placeholder виден!)
Тестирование
Важными этапами являются тестирование и проверка корректности работы placeholder'ов:
- Проверяйте работу в различных браузерах и с разнообразным содержимым.
- Обращайте внимание на нестандартное поведение, например, на неподвижный курсор или отсутствие реакции.
- Используйте инструменты автоматизации, вроде Selenium, для регрессионного тестирования.
Читаемость кода
Следите за ясностью и структурированностью вашего JavaScript-кода:
- Добавляйте комментарии для улучшения понимания кода.
- Организовывайте логику placeholder'а в переиспользуемые функции.
- Обеспечивайте доступность, предусматривая необходимые индикаторы и контраст текста для комфорта пользователей со слабым зрением.
Полезные материалы
- Can I use... Support tables for HTML5, CSS3, etc — проверка совместимости браузеров для атрибута HTML5 placeholder.
- <input>: Элемент Ввода (Form Input) – HTML: HyperText Markup Language | MDN — подробная информация об атрибуте placeholder элемента <input>.
- :placeholder-shown | CSS-Tricks — как стилизовать placeholderы в разных браузерах.
- GitHub – mathiasbynens/jquery-placeholder: A jQuery plugin — jQuery плагин для работы с placeholderами в старых браузерах.
- QuirksMode – for all your browser quirks — таблицы совместимости браузеров для фронтенд-технологий.
- GitHub – jamesallardice/Placeholders.js: A JavaScript polyfill — JavaScript-полифилл для поддержки атрибута HTML5 placeholder в старых браузерах.