3

複数のブラウザで作業する必要があるHTML5ページに検索入力があります。

<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ではこれが壊れているようです。IE10は（IE9以下のように）とsearchまったく同じように表示され、タイプ（Chrome / Webkitのように）として返されますが、イベントは発生しません。<input type="text" />searchonsearch

検索入力のサポートを検出するためのより良い方法はありますか？

この機能のサポートをスニッフィングするための最良の方法は何ですか？

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 に答える