如何始终检测浏览器对 HTML5 搜索输入的支持？答案

【问题标题】：How can I consistently detect browser support for HTML5 search inputs?如何始终检测浏览器对 HTML5 搜索输入的支持？
【发布时间】：2013-02-14 19:36:55
【问题描述】：

我在需要在多个浏览器中工作的 HTML 5 页面上有一个搜索输入：

<input type="search" placeholder="type here..." />

我通过查看浏览器将其呈现为search 输入还是常规text 输入来检测浏览器是否支持搜索：

var supportsHtml5Search = !!(inputDomElement.type !== 'text');
if (supportsHtml5Search) {
    inputDomElement.addEventListener('search', searchFunction);
}
else {
    // This browser doesn't support onsearch event, so handle keyup instead
    inputDomElement.addEventListener('keyup', searchFunction);
}

这很好用——Chrome 和 Safari 使用了onsearch 事件（当他们点击明确的X 图标时也会触发），IE 使用了keyup 事件（这里没有显示一些额外的检查）。

然而，这似乎在 IE10 中被破坏了，它显示 search 与 <input type="text" /> 完全相同（如 IE9 及更低版本）并返回 search 作为类型（如 Chrome/Webkit），但没有t 触发 onsearch 事件。

有没有更好的方法来检测搜索输入支持？

了解此功能支持的最佳方式是什么？

【问题讨论】：

@raina77ow 我会调查的，干杯。
@raina77 好用！我把它改成了var supportsHtml5Search = !!('onsearch' in inputDomElement);，在IE10中返回false，在Webkit中返回true。我还有一些测试要做，但把它放在一个答案中，我会接受它:-)
好的，完成了（还添加了一些研究）。仍然想知道为什么在这里需要!! - in 不总是返回boolean？
@raina77ow 我没有，代码库有很多布尔值，所以到处都是!! :-S

标签： html cross-browser internet-explorer-10 html-input browser-feature-detection

【解决方案1】：

This article 描述了一种检测事件支持本身的强大方法 - 因为您的情况与功能支持不同时是另一种情况。

基本上，必须测试相应元素的相应属性（例如，onsearch 用于 search 事件）。喜欢...

'onsearch' in document.documentElement; // true in Chrome, false in Firefox/Opera

文章中提到，如果 Firefox 对错误的元素进行检查，检查将失败，但我实际上发现只有 Opera 的行为是这样的：

'onchange' in document.documentElement; // false in Opera, true in Firefox/Chrome
'onchange' in document.createElement('input'); // true in Opera too

作为最后的手段，可以尝试为这个元素分配一个处理程序，然后再次检查这个属性：

var el = document.createElement('input'); 
el.setAttribute('onsearch', 'return;'); 
typeof el.onsearch; // 'function' in Chrome, 'undefined' in Firefox/Opera

【讨论】：

您知道过去 5 年有什么变化吗？我的意思是，如果答案是最新的，或者有更多答案的重复项，或者我们需要在这个问题上悬赏：)
不明白你的意思，抱歉。显然，IE10 处理事物的方式几乎没有变化（问题主要是关于那个浏览器）。 Chrome 和 Firefox 大多是一致的，但遗憾的是，有时“支持”和“工作”之间仍然存在差异。