8

質問から始めます。特定のブラウザーにバグのある機能の実装があり、JavaScript が現在のブラウザーにそのバグのある実装があるかどうかを知る必要がある場合、別の戦略を使用できるようになります。ブラウザーの種類のスニッフィングを行わずに、実装にバグがあるかどうかをどのように判断しますか? （これは一般的に悪いと考えられています）？

これが全体の状況です。

フィールドへのユーザー変更の通知を取得するために「input」イベントを使用したいコードに取り組んでいました<input type="text">（「change」イベントよりもはるかにライブで動作します）が、そのイベントがサポートされていない場合、多くの他の多くのイベントを含むより複雑なスキーム。

「入力」イベントは一部のブラウザーでのみサポートされているため、機能検出は一般的に物事を行うためのより堅牢な方法であるため、イベントの機能検出を (ブラウザーのユーザー エージェントのスニッフィングではなく) 行う方法を探しました。そのため、まさにそれを行うためのこの素晴らしい記事に出くわし、このコードは機能しているようです:

var isEventSupported = (function(){
    var TAGNAMES = {
      'select':'input','change':'input',
      'submit':'form','reset':'form',
      'error':'img','load':'img','abort':'img'
    }
    function isEventSupported(eventName) {
      var el = document.createElement(TAGNAMES[eventName] || 'div');
      eventName = 'on' + eventName;
      var isSupported = (eventName in el);
      if (!isSupported) {
        el.setAttribute(eventName, 'return;');
        isSupported = typeof el[eventName] == 'function';
      }
      el = null;
      return isSupported;
    }
    return isEventSupported;
  })();

その後、IE で問題が発生しました (驚き、驚き)。IE は「入力」イベントをサポートすると主張しており、上記の機能テストに合格し、ほとんどの場合動作しますが、IE のサポートには非常にバグがあります。ユーザーがバックスペース キーを押しても、イベントはトリガーされません (他の欠落している動作の中でも特に)。そのため、IEでは信頼できません。そのため、「入力」イベントの機能テストを行い、存在する場合は非常にクリーンな実装を使用し、存在しない場合は、他の 8 つのイベントを監視することを含むこの非常に醜い回避策を使用する、このきれいなコードを作成しました。現在、「入力」イベントの機能テストに合格し、コードがそれを使用しようとするため、IE でバストされていますが、非常にバグが多いため機能しません。

これらの IE のバグはユーザーの操作に現れるため、バグのある動作を特定するための JavaScript 機能テストを考案する方法が思い浮かびません。そのため、私の現在の唯一の道は、ブラウザーのスニッフィングに頼ることであり、ブラウザーが IE の場合は "input" タグに依存することを拒否することです。

ブラウザのスニッフィング以外に、「入力」イベントでバグのある動作を特定するためのオプションはありますか? ブラウザのスニッフィングを行う必要がある場合、自由に偽装でき、正確であることが保証されていないユーザー エージェント文字列ではなく、動作によって IE を識別する方法はありますか?

4

2 に答える 2

0

クロスブラウザの「入力変更」イベントに関心がある場合は、次のように実装します。

function onInputChange(domInput, callback) {
    if (domInput.addEventListener) {
        domInput.addEventListener('input', callback, false); // Firefox, etc.
    } else if (domInput.attachEvent) {
        domInput.attachEvent('onpropertychange', callback); // IE
    }
}


使用例：

var leInput = document.getElementById('myInput');
var leCallback = function () {
    // awesome stuff here
};

onInputChange(leInput, leCallback);


すべてのブラウザで動作し、キーボード入力とコピー/貼り付けをサポートします。

ただし、上記のコードを書いた時点では存在していなかった、呪われたIE9の例外があります。マイクロソフトはバグの修正を検討するだろうか？：\

于 2012-08-31T15:04:16.153 に答える