如何检测是否支持HTML5输入控件?
如果我在窗体上放置了一个<input type="range">
控件,某些浏览器将(正确)呈现滑块控件,而其他浏览器则不知道range
是否会呈现文本框。处理这种情况需要额外的验证,因为文本框可以包含任何文本。有没有JavaScript可以放入页面来说“在DOM中查看此控件,如果它是文本框控件,请执行foo()
”?如何检测是否支持HTML5输入控件?
这site recommends using Modernizer:
检查HTML5输入类型使用检测技术#4。首先,在内存中创建一个虚拟<input>
元素。所有<input>
元素的默认输入类型都是“文本”。这将被证明是非常重要的。
var i = document.createElement("input");
接下来,将哑元素上的type属性设置为要检测的输入类型。
i.setAttribute("type", "color");
如果您的浏览器支持该特定输入类型,则type属性将保留您设置的值。如果您的浏览器不支持该特定输入类型,它将忽略您设置的值,并且类型属性仍然是“文本”。
return i.type !== "text";
,而不是写13个独立的功能你自己,你可以使用Modernizr的检测所有在HTML5中定义的新的输入类型的支持。 Modernizr重用了单个元素来有效检测对所有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
}
的
检查出HTML 5 shim ...也与错误的HTML 5 shiv。 – ErikE 2013-04-10 00:20:18
可能重复[如何检查,如果输入的HTML5支持?(http://*.com/questions/8278670/how-to-check-if-a-html5-input-is - 支持) – Mathletics 2013-04-10 00:20:11