Как определить, поддерживается ли входной контроль HTML5?

Question

Если я положил элемент управления <input type="range"> на форму, некоторые браузеры (правильно) будут отображать ползунок, а другие не будут знать, что range есть и будет отображать текстовое поле. Обработка этого случая потребует дополнительной проверки, поскольку текстовое поле может содержать любой произвольный текст. Есть ли какой-либо JavaScript, который я могу разместить на странице, чтобы сказать «посмотрите на этот элемент управления в DOM, и если это элемент управления текстовым полем, выполните foo()»?

Answer 1

site recommends using Modernizer Это:

Проверка типов входных HTML5 использует технику обнаружения # 4. Во-первых, вы создаете фиктивный элемент <input> в памяти. Тип ввода по умолчанию для всех элементов <input> - это «текст». Это будет жизненно важно.

var i = document.createElement("input"); 

Затем установите атрибут type на фиктивном элементе на тип ввода, который вы хотите обнаружить.

i.setAttribute("type", "color"); 

Если ваш браузер поддерживает этот тип ввода, свойство type сохранит заданное вами значение. Если ваш браузер не поддерживает этот тип ввода, он будет игнорировать установленное вами значение и свойство type будет по-прежнему являться «текстом».

return i.type !== "text"; 

Вместо написания 13 отдельных функций самостоятельно, вы можете использовать Modernizr обнаружить поддержку для всех новых типов ввода, определенных в HTML5. Modernizr повторно использует один элемент <input>, чтобы эффективно обнаруживать поддержку для всех 13 типов ввода. Затем он создает хэш с именем Modernizr.inputtypes, который содержит 13 ключей (атрибуты типа HTML5) и 13 булевых значений (true, если поддерживается, false, если нет).

//check for native date picker 
if (!Modernizr.inputtypes.date) { 
    // no native support for <input type="date"> :(
    // maybe build one yourself with Dojo or jQueryUI 
}