HTMLのonchangeとoninput、onblurの違い【現役SE解説】
今回は、HTMLのonchangeとoninput、onblurの違いについて、それぞれに分け、簡単に解説していきます。
onchange
onchange属性ではフォーカスが外れ、値が変わった際にコードが実行されます。
1文字ずつの検証には向いていませんが、全体として値を評価したい際に有効なイベントです。
<input type="text" onchange="alert('フォーカスが外れ、値が変わりました。');">
上記のコードでは、テキストボックスのフォーカスが外れ、値が変わった際にダイアログが表示されます。
oninput
oninput属性では1文字の入力があった際にコードが実行されます。
エンターを含め、1文字ずつ検証することができ、onchangeとは活用法が異なります。
<input type="text" oninput="alert('入力がありました。');">
上記のコードでは、テキストボックスに1文字の入力があった際に、ダイアログが表示されます。
onblur
onblur属性ではフォーカスが外れた際にコードが実行されます。
onchangeやoninputは値に関係があるのに対し、onblurは値とは無関係です。
<input type="text" onblur="alert('フォーカスが外れました。');">
上記のコードでは、テキストボックスのフォーカスが外れた際に、ダイアログが表示されます。