集中力を失わずにリアルタイムの入力変更を追跡するにはどうすればよいですか?

フォーカスを失わずに 'onchange' を使用して入力変更をリアルタイムで追跡する

「テキスト」タイプの入力コントロールは通常、「 onchange」イベントは、ユーザーがフィールドを離れた（ぼかした）ときのみ発生します。この制限は、ユーザーの入力時の変更を追跡するときにイライラする可能性があります。

幸いなことに、最新のブラウザーでは、「oninput」というより良い解決策が提供されています。このイベント リスナーは、テキストフィールドのコンテンツをリアルタイムで更新するため、フォーカスを失う必要がなくなります。互換性を最大限に高めるには、IE サポートに「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

ブラウザの互換性に関する追加の注意事項:

• 「oninput」はすべてのメジャーでサポートされていますモバイル ブラウザを含むブラウザ。
• IE8 以下では、「onpropertychange」イベントが必要です。
• 「onchange」は、フォーカスを失った後の遅延のため、入力中の変更を追跡するのには適していません。

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