Question

我在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事件。

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

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

Answer 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

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

1 个答案: