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

Question

我正在研究一些HTML5演示代码,包括类似的东西 <input type="date" />

这当前在Opera 10中正常工作,但每个其他浏览器只显示正常的文本输入.然后我使用jQuery.date-input插件在不支持它的浏览器上覆盖此行为.

问题是 - jQuery也在Opera上运行,所以在Opera中我得到两个日历日期选择器(一个来自浏览器,一个来自jQuery)

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

Answer 1

我会看看Modernizr.它是一个开源的,麻省理工学院授权的Javascript库,可检测对许多HTML5/CSS3功能的支持,并且它非常小(7kb压缩).要使用它,只需:

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

在<head>你的文件中.之后,它具有各种功能来检查您的需求.例:

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

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

Answer 2

是的,检查特定的浏览器根本不是你想要的.它有时可用于检测何时需要为浏览器错误(通常使用IE)应用变通方法,但如果您想知道浏览器是否支持某个功能,只需要嗅探它.

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

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

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