Как я могу последовательно обнаруживать поддержку браузером входных данных поиска HTML5?

У меня есть поисковый ввод на странице 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 (которое также полезно срабатывает, когда они нажимают на значок clear X), а IE использовал событие keyup (с некоторыми дополнительными проверками, не показанными здесь).

Однако это, кажется, так сломан в IE10, который отображает search точно так же, как <input type="text" /> (например, IE9 и ниже) и возвращает search как тип (например, Chrome/Webkit), но не запускает событие onsearch.

Есть ли лучший способ обнаружить поддержку ввода поиска?

Как лучше всего обнюхать поддержку этой функции?

1 3
html5 cross-browser internet-explorer-10 html-input

1 ответ:

В этой статье описывается довольно надежный способ обнаружения самой поддержки событий - поскольку ваш случай является еще одним, когда он отличается от поддержки функций.

В принципе, нужно проверить соответствующее свойство (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
4