如何检测是否支持HTML5输入控件

How to detect whether an HTML5 input control is supported?

本文关键字：支持 HTML5 输入 控件 是否 何检测 检测      更新时间：2023-09-26

如果我把<input type="range">控件放在表单上，一些浏览器会(正确地)呈现一个滑块控件，而其他浏览器不知道range是什么，会呈现一个文本框。处理这种情况需要额外的验证，因为文本框可以包含任意文本。是否有任何JavaScript我可以放入页面说"看这个控件在DOM，如果它是一个文本框控件，做foo()"?

本网站推荐使用Modernizer:

检查HTML5输入类型使用检测技术#4。首先，在内存中创建一个虚拟的<input>元素。所有<input>元素的默认输入类型是"text"。这将被证明是至关重要的。

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

接下来，将dummy元素上的type属性设置为您想要检测的输入类型。

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

如果您的浏览器支持特定的输入类型，type属性将保留您设置的值。如果你的浏览器不支持特定的输入类型，它会忽略你设置的值，type属性仍然是"text"。

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
}
相关文章：