☰

入力タイプ「テキスト」で入力時に onchange を追跡する最適な方法は? 質問する

tag-icon • tag-icon javascript html forms
入力タイプ「テキスト」で入力時に onchange を追跡する最適な方法は? 質問する

私の経験では、イベントは通常、コントロールをinput type="text" onchange離れた後にのみ発生します。blur

onchangeコンテンツが変更されるたびにブラウザを強制的にトリガーする方法はありますかtextfield? そうでない場合、これを「手動で」追跡する最もエレガントな方法は何ですか?

イベントの使用はonkey*信頼性が低く、フィールドを右クリックして [貼り付け] を選択すると、キーボード入力なしでフィールドが変更されます。

setTimeout唯一の方法ですか？...醜いですね :-)

ベストアンサー1

最近はoninput。みたいなonchange要素へのフォーカスを失うことなく、HTML5 で実現できます。

これは、IE8 以下を除くすべてのバージョン (モバイルでも) でサポートされています。IE の場合は を追加します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/Edge18-/IE9+ don’t fire on <select><option>
// source.addEventListener('change', inputHandler); 
<input id="source">
<div id="result"></div>

おすすめ記事