jquery - 通过 jQuery 检测对特定 HTML 5 功能的支持

Question

我正在编写一些 HTML5 演示代码，包括类似<input type="date" />

这目前在 Opera 10 中可以正常工作，但其他所有浏览器都只显示正常的文本输入。然后，我使用 jQuery.date-input 插件在不支持它的浏览器上覆盖此行为。

问题是——jQuery 也在 Opera 上运行，所以在 Opera 中我得到了两个日历日期选择器（一个来自浏览器，一个来自 jQuery）

我现在可以解决这个问题if (window.opera)- 但是有什么方法可以使用，比如 jQuery.support，我可以可靠地检测当前浏览器是否支持特定的 HTML5 功能？

score 17 · Accepted Answer

我会看看Modernizr。它是一个开源的、MIT 许可的 Javascript 库，可以检测对许多 HTML5/CSS3 功能的支持，而且它非常小（7kb 压缩）。要使用它，只需：

<script src="modernizr.min.js"></script>

在<head>您的文档中。之后，它具有多种功能来检查您的需求。例子：

if (Modernizr.canvas) { 
     // do stuff
}

还有更多方法可以检查您想要的特定 HTML5/CSS3 功能。查看他们的网站以获取它并查看文档。

score 11 · Accepted Answer

是的，检查特定浏览器根本不是您想要的。它有时对于检测何时需要对浏览器错误（通常使用 IE）应用变通方法很有用，但如果您想知道浏览器是否支持某个功能，只需嗅探它即可。

有些东西比其他东西更容易闻。对于您的日期输入支持示例，它非常简单。该input.type属性告诉你浏览器认为它是什么类型的控件；如果不支持日期输入，您将获得'text'.

<input type="date" class="dateinput" />

if ($('.dateinput')[0].type!=='date') {
     $('.dateinput').addSomeDateScriptingPluginThing();
}

2 回答 2