Поддержка атрибута placeholder в Internet Explorer

Быстрый ответ

Для реализации поддержки заполнителей (placeholder) в элементах ввода для Internet Explorer, не имеющих этого функционала "из коробки", можно привлечь JavaScript. Ниже приведён простой пример с использованием библиотеки jQuery:

// Расширяем поддержку placeholder для старых версий браузеров
$('input[placeholder]').focus(function() {
  var input = $(this);
  // Исключаем недоразумения с результатом от смешивания значения поля и заполнителя
  if (input.val() === input.attr('placeholder')) {
    input.val('').removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  // При отсутствии значения в поле, возвращаем заполнитель
  if (input.val() === '' || input.val() === input.attr('placeholder')) {
    input.addClass('placeholder').val(input.attr('placeholder'));
  }
}).blur().parents('form').submit(function() {
  // Очищаем поля перед отправкой формы
  $(this).find('input[placeholder]').each(function() {
    var input = $(this);
    // Удаляем заполнитель перед отправкой значений формы
    if (input.val() === input.attr('placeholder')) {
      input.val('');
    }
  });
});

Встроив этот код в конец HTML-документа, вы сможете эффективно эмулировать стандартное поведение заполнителей, где текст автоматически появляется и исчезает при фокусировке и разфокусировке поля ввода.

Улучшение кроссбраузерности

Стабильная поддержка заполнителей может отличаться в разных браузерах. IE10 и его предшественники могут порой быть неожиданно капризны. В некоторых случаях заполнитель не исчезает при фокусе на элемент, или для корректной работы требуется специфическая обработка событий.

Полифилы: Заполняем пробелы!

Плагины, такие как Placeholder.js и jQuery-html5-placeholder, позволяют наглядно решить проблему с поддержкой старых версий IE. Они добавляют функциональность и эстетические особенности заполнителей. Последний из них использует затемнение для избежания путаницы между текстом-заполнителем и значением поля.

Подробнее об этом расскажет наш спикер на видео

Магия налету: Динамическая смена типов!

Как с фокусами, связанными с картами, можно создать "волшебный" механизм, позволяющий переключать типы полей ввода, например, из type="text" в type="password" и обратно. Это улучшает взаимодействие с заполнителями, особенно в контексте полей ввода паролей и их скрывания.

Чистота отправляемых данных

Чистота отправляемых данных иногда не менее важна, чем порядок в доме. Убедитесь, что при отправке формы используются только нужные данные. jQuery поможет вам компетентно управлять процессом удаления значений по умолчанию как перед отправкой формы, так и в процессе взаимодействия с ней.

Визуализация

Состояние поддержки заполнителей в Internet Explorer можно представить в виде таблицы:

| Функционал           | Совместимость с IE |
| -------------------- |:------------------:|
| Поддержка Placeholder| 💡 (Включите JS)   |

Здесь символ лампочка (💡) символизирует наличие функционала заполнителя:

Без JS: 💡❌ – Темно, как в пещере, поддержка заполнителя отсутствует в IE.
С JS:    💡✅ – Всё светло и доступно, заполнитель функционирует в IE благодаря JS.

Для того чтобы увидеть заполнители в Internet Explorer, нужно просто активировать JavaScript!

Приблизим лучшую поддержку в IE

Работа с эмуляцией заполнителей в IE становится лёгким и увлекательным занятием.

Наложение: новый уровень поддержки

С помощью jQuery-html5-placeholder можно просто реализовать эффект наложения метки, которая будет выполнять роль заполнителя. Это решение будет наиболее совместимым и удобным для пользователей.

Скрипты без зависимостей

Если вам нужна лёгкость для IE, выберите Placeholder.js. Этот скрипт не имеет зависимостей и замечательно справляется со своей задачей без использования дополнительных библиотек.

Полифилы на высоте!

Посмотрите коллекцию на GitHub под названием HTML5 Cross Browser Polyfills для улучшенной поддержки и ощутите магию библиотеки Webshim, которая избавляет вас от необходимости учитывать ограничения IE в HTML5!

Примеры в действии

Не ограничивайтесь теорией — ознакомьтесь с примерами в реальной работе jQuery-html5-placeholder в IE9. Это словно бесплатная экскурсия в мир возможностей!

Защитите сервер

Не допускайте, чтобы текст-заполнитель портил ваши данные. Умело организуйте работу скриптов, чтобы нежеланный гость в виде заполнителя не попал в базу данных.

Полезные материалы

1. Can I use... Support tables for HTML5, CSS3, etc — полная информация о поддержке браузерами атрибута placeholder.
2. <input>: Элемент формы ввода (Form Input) – HTML: HyperText Markup Language | MDN — неоценимый справочник по элементу <input>, включая информацию о placeholder.
3. Документация Modernizr — всё, что вам нужно знать о определении поддержки HTML5 и CSS3 в разных браузерах.
4. GitHub – mathiasbynens/jquery-placeholder: jQuery плагин для эмуляции поведения HTML5 placeholder в менее усердных браузерах — полифильный подход к обеспечению широкой поддержки заполнителей в Internet Explorer.
5. javascript – Обнаружение нажатия клавиши Enter в поле ввода текста – Stack Overflow — обсуждения и советы по управлению обработкой заполнителей и связанных с этим событий ввода.
6. Атрибут placeholder элемента HTML input — руководство по использованию атрибута placeholder.
7. HTML5 Please – Используйте новые возможности отвественно — рекомендации по внедрению функционала HTML5, включая placeholder, с предложениями по использованию полифилов.