3

我在需要在多个浏览器中工作的 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 中被破坏了，它显示 asearch与 an 完全相同<input type="text" />（如 IE9 及更低版本）并search作为类型返回（如 Chrome/Webkit），但不会触发onsearch事件。

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

嗅探此功能支持的最佳方法是什么？

4

1 回答 1

4

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

基本上，必须测试相应元素的相应属性（例如，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
于 2013-02-28T17:45:41.137 回答