Как проверить, поддерживает ли браузер собственный атрибут-заполнитель?

Question

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

Как я могу использовать jQuery для проверки встроенной поддержки атрибута заполнителя?

Answer 1

Вы можете легко добавить к $.support, вставив его в верхнюю часть написанного вами Javascript:

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

Затем вы можете использовать либо $.support.placeholder, либоjQuery.support.placeholder в любом месте вашего кода.

NB. Этот код адаптирован с diveintohtml5 , ссылка предоставлена ​​hellvinz выше.

Answer 2

Используйте библиотеку Modernizr, которую вы можете найти здесь: http://www.modernizr.com/

И затем сделайте следующее:

if (Modernizr.input.placeholder) {
  // your placeholder text should already be visible!
} else {
  // no placeholder support :(
  // fall back to a scripted solution
}

Modernizr действительно удобен для тестирования поддержки браузером почти всех HTML5функциональность.

Answer 3

Мне нравится иметь такой простой класс ...

var Browser = {
  Can: {
    Placeholder: function () {
      return 'placeholder' in document.createElement('input'); 
    }
  }
}

... чтобы вы могли легко проверить, поддерживает ли ваш браузер атрибут placeholder.

Answer 4

Свойство placeholder существует в объектах INPUT DOM во всех браузерах, независимо от того, был ли определен атрибут-заполнитель для элемента HTML INPUT.

Правильный путь:

var Modernizr = {};
// Create the input element for various Web Forms feature tests.
var inputElem = document.createElement('input'), attrs = {};    
Modernizr.input = (function(props) {
    for(var i = 0, len = props.length; i < len; i++) {
        attrs[props[i]] = props[i] in inputElem;
    }
    return attrs;
})('autocomplete autofocus list placeholder max min multiple pattern required step'.split(' '));

if(!Modernizr.input.placeholder) {
    // Do something.
}