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

Question

如果我<input type="range">在窗体上放置一个控件,某些浏览器会(正确地)渲染一个滑块控件,而其他浏览器则不会知道是什么range,而是会渲染一个文本框.处理这种情况需要额外的验证,因为文本框可以包含任何任意文本.是否有任何JavaScript可以放入页面中说"在DOM中查看此控件,如果它是文本框控件,那么foo()"？

Answer 1

本网站建议使用Modernizer:

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

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

接下来,将虚拟元素上的type属性设置为要检测的输入类型.

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

如果您的浏览器支持该特定输入类型,则type属性将保留您设置的值.如果您的浏览器不支持该特定输入类型,它将忽略您设置的值,并且type属性仍为"text".

return i.type !== "text";

您可以使用Modernizr检测对HTML5中定义的所有新输入类型的支持,而不是自己编写13个单独的函数.Modernizr重用单个<input>元素来有效地检测对所有13种输入类型的支持.然后它构建一个名为hash的哈希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
}