JavaScriptのonfocus・onblurとは？入力欄のフォーカス取得・離脱時のイベント処理を解説
onfocus と onblur は、入力欄やウィンドウにフォーカスが当たったとき、または離れたときに発生するイベントです。
マウスクリックや Tab キーによる移動など、ユーザー操作に応じて処理を実行したい場合に利用します。
onfocusイベントとは？
onfocus は、要素にフォーカスが当たった瞬間に発生するイベントです。
入力欄を強調したり、説明文を表示したりする用途に使われます。
使用例：ページ内の要素にフォーカスが当たったときに処理を実行
<body onfocus=”msg()”>
→ ページ内のどこかにフォーカスが当たったら msg() を実行します。
onblurイベントとは？
onblur は、要素からフォーカスが離れたときに発生するイベントです。
入力チェックやエラー表示などに利用されます。
使用例：特定の入力欄からフォーカスが離れたときに処理を実行
document.form1.elements[0].onblur = check;
→ form1 の最初の入力欄からフォーカスが離れたら check() を実行します。
onfocus と onblur の組み合わせ例
入力欄にフォーカスが当たったときと離れたときで別々の処理を行う例です。
<input type=”text” name=”mail” size=”40″
onfocus=”myFunc1()” onblur=”myFunc2()”>
onfocus=”myFunc1()” onblur=”myFunc2()”>
→ フォーカス時に myFunc1()、フォーカス離脱時に myFunc2() を実行します。
実際のフォーム例
<form name=”form1″>
メールアドレス：
<input type=”text” name=”mail” size=”40″
onfocus=”this.style.background=’#ffffcc'”
onblur=”this.style.background=’white'”>
</form>
メールアドレス：
<input type=”text” name=”mail” size=”40″
onfocus=”this.style.background=’#ffffcc'”
onblur=”this.style.background=’white'”>
</form>
→ フォーカス時に背景色を変更し、離れたら元に戻す例です。
まとめ
onfocus：要素にフォーカスが当たったときに発生onblur：要素からフォーカスが離れたときに発生- 入力チェック・UI強調・説明表示などに便利
- フォーム操作の基本として必ず覚えておきたいイベント
