Question

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

Answer 1

这site recommends using 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种输入类型的支持。然后它构建一个名为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
}

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

1 个答案: