Поддержка HTML5 "placeholder"

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

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

И проверить в браузере вы можете:

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

Ответ 5

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

В приведенном ниже коде убедитесь, что для полей ввода установлены атрибут 'value' и 'placeholder'. В моем конкретном случае мне нужно было поддерживать варианты IE.

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

Другим подходом к упрощению самого script является присвоение класса каждому вводу, который вы специально хотите использовать для этого script, и обновить истинное утверждение соответственно (хотя метод ниже немного сух).

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;
            }
    });
}