ブラウザ間でテキスト入力の変更をリアルタイムで追跡するにはどうすればよいですか?

テキスト入力の入力時追跡

テキスト入力の onchange イベントは通常、フォーカスが失われた後にのみトリガーされます。ただし、リアルタイムの追跡が必要なシナリオでは、いくつかのオプションがあります。

oninput イベント

最新のブラウザは、テキストフィールドとして継続的にトリガーされる oninput イベントをサポートしています。内容が変わります。これにより、フォーカスを失う必要がなくなります。

onpropertychange

Internet Explorer 8 以前では、onpropertychange イベントを使用できます。

入力とプロパティ変更によるイベント処理

を組み合わせることで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 IE8

選択ボックスに関する考慮事項

Firefox、Edge 18-、および IE9 は起動しません選択ボックスでオプションが選択されたときの onchange イベント。これらのブラウザの場合は、代わりに変更イベント リスナーの使用を検討してください。

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