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

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

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

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


html cross-browser html-input internet-explorer-10 browser-feature-detection
person Keith    schedule 28.02.2013    source источник
comment
@ raina77ow Я посмотрю на это, ура.   -  person Keith    schedule 28.02.2013
comment
@ raina77оу, это работает! Я изменил его на var supportsHtml5Search = !!('onsearch' in inputDomElement);, и это возвращает false в IE10 и true в Webkit. Мне еще нужно провести тестирование, но вставьте его в ответ, и я приму его :-)   -  person Keith    schedule 28.02.2013
comment
Хорошо, сделал это (добавляя некоторые исследования). Все еще удивляетесь, зачем вам здесь !! - разве in не всегда возвращает boolean?   -  person raina77ow    schedule 28.02.2013
comment
@ raina77ow Нет, в кодовой базе много логических значений, поэтому она завалена !! :-S   -  person Keith    schedule 01.03.2013

Ответы (1)


arrow_upward
4
arrow_downward

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

По сути, нужно проверить соответствующее свойство (например, 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
person raina77ow    schedule 28.02.2013
comment
Вы знаете, изменилось ли что-нибудь за последние 5 лет? Я имею в виду, если ответ актуален или есть дубликат с большим количеством ответов, или если нам нужно назначить награду за этот вопрос :) - person brasofilo; 06.08.2018
comment
Не уверен, что вы имеете в виду, извините. По-видимому, мало что изменилось в том, как IE10 обрабатывает вещи (и вопрос был в основном об этом браузере). И Chrome, и Firefox в основном одинаковы, но, к сожалению, иногда все же есть разница между «поддерживается» и «работает». - person raina77ow; 06.08.2018