HTMLのonchangeとoninput、onblurの違い【現役SE解説】

PROGRAM

今回は、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('フォーカスが外れました。');">

上記のコードでは、テキストボックスのフォーカスが外れた際に、ダイアログが表示されます。