Поддержка HTML5 "заполнитель"

Question

Как узнать, поддерживает ли браузер тег-заполнитель HTML5, чтобы я мог решить, подключать ли мой плагин-заполнитель jQuery или нет.

Answer 1

var placeholderSupported = ( 'placeholder' in document.createElement('input') );

Переменная placeholderSupported будет true, если она поддерживается изначально. В противном случае он будет установлен на false.

Answer 2

http://diveinto.html5doctor.com/everything.html#placeholder

return 'placeholder' in document.createElement('input');

Однако используемый вами плагин jQuery, возможно, уже проверяет встроенную поддержку - вам может не сделать это самостоятельно.

Answer 3

Если вы хотите включить сторонние библиотеки, такие как Modernizr и yepnope.js, действительно легко протестировать поддержку и постепенно улучшать ее, постепенно снижая.

Это хорошая статья с большим количеством ресурсов, которые должны помочь: http://www.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/

Answer 4

Чтобы получить широкую идею, перейдите по ссылке:

http://caniuse.com/#search=placeholder

А для проверки в браузере вы можете сделать:

function supportsPlaceholder() {
  var i = document.createElement('input');
  return 'placeholder' in i;
}

Answer 5

Я позаимствовал ответ из вышеприведенного и сделал так, чтобы он был обратно совместим со старыми современными браузерами, а также с IE -

. С помощью приведенного ниже кода убедитесь, что у вас есть и «значение», и «атрибут placeholder 'для полей ввода.В моем конкретном случае мне нужно было поддерживать варианты IE.

Объяснение - Если браузер поддерживает заполнитель, введенное значение удаляется.Если нет, старые браузеры будут игнорировать атрибуты заполнителя, а нижеприведенный js имитирует поведение заполнителя по умолчанию.Этот сценарий также будет игнорировать любые токены авторизации для CSRF (в моих формах получалось сообщение об ошибке, когда значения токенов аутентификации очищались, вызывая предупреждение CSRF в моих приложениях Rails).назначить класс каждому входу, который вы специально хотите использовать в этом сценарии, и соответствующим образом обновить выражение true (хотя приведенный ниже метод немного более сухой).

var placeholderSupported = !!( 'placeholder' in document.createElement('input') );

if (placeholderSupported === true){
    $('input:not([type="submit"], [name="authenticity_token"])').val('');
} else{
    $('input')
      .focus(function() {
            if (this.value === this.defaultValue) {
                this.value = '';
            }
      })
      .blur(function() {
            if (this.value === '') {
                this.value = this.defaultValue;
            }
    });
}