テキスト入力フィールドのリアルタイムの変更を追跡するにはどうすればよいですか?

入力テキスト フィールドのリアルタイムの変更を追跡する最良の方法

input type="text" を使用する場合、多くの場合、onchange イベントはユーザーがフォーカスを離れた後にのみ発生します。畑から。変更が行われたときにそれを追跡する必要がある場合、これは問題になる可能性があります。

ブラウザによるオンザフライ追跡のサポート

最新のブラウザは、oninput イベントを通じて解決策を提供します。このイベントは、テキスト フィールドの内容が変更されるたびにトリガーされます。これは onchange のほぼ完璧な代替品であり、要素からフォーカスを失うことなくリアルタイム監視を提供します。これは、モバイル ブラウザを含むすべての主要なブラウザでサポートされています。

ブラウザ間の互換性

IE8 以前を含む古いブラウザの場合、onpropertychange イベントと oninput イベントを組み合わせることで、相互ブラウザ間の互換性を確保できます。ブラウザの互換性。

コード例

コード例は次のとおりです。クロスブラウザー追跡に oninput と onpropertychange を使用する方法を紹介します:

const source = document.getElementById('source');
const result = document.getElementById('result');

const inputHandler = function(e) {
  result.innerText = e.target.value;
}

source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler);

// For completeness, include listen for option changes which won't trigger either input or change
source.addEventListener('change', inputHandler);

oninput または onchange をサポートしていないブラウザーの場合、代わりに setTimeout 関数を使用できますが、それほど洗練されていません。前述のソリューションと同様に効率的です。

以上がテキスト入力フィールドのリアルタイムの変更を追跡するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。