我在 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)，但不会触发 onsearch事件。
是否有更好的方法来检测搜索输入支持？
嗅探此功能支持的最佳方式是什么？
最佳答案
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
关于html - 如何始终检测浏览器对 HTML5 搜索输入的支持？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15138472/