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

Question

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

Answer 1

该站点建议使用 Modernizer：

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

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

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

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

如果您的浏览器支持该特定输入类型，则 type 属性将保留您设置的值。如果您的浏览器不支持该特定输入类型，它将忽略您设置的值，并且 type 属性仍将是“文本”。

return i.type !== "text";

您可以使用 Modernizr 检测对 HTML5 中定义的所有新输入类型的支持，而不是自己编写 13 个单独的函数。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
}