JavaScriptのonfocus・onblurとは？入力欄のフォーカス取得・離脱時のイベント処理を解説

onfocus と onblur は、入力欄やウィンドウにフォーカスが当たったとき、または離れたときに発生するイベントです。
マウスクリックや Tab キーによる移動など、ユーザー操作に応じて処理を実行したい場合に利用します。

onfocusイベントとは？

onfocus は、要素にフォーカスが当たった瞬間に発生するイベントです。
入力欄を強調したり、説明文を表示したりする用途に使われます。

使用例：ページ内の要素にフォーカスが当たったときに処理を実行

→ ページ内のどこかにフォーカスが当たったら msg() を実行します。

onblurイベントとは？

onblur は、要素からフォーカスが離れたときに発生するイベントです。
入力チェックやエラー表示などに利用されます。

使用例：特定の入力欄からフォーカスが離れたときに処理を実行

document.form1.elements[0].onblur = check;

→ form1 の最初の入力欄からフォーカスが離れたら check() を実行します。

onfocus と onblur の組み合わせ例

入力欄にフォーカスが当たったときと離れたときで別々の処理を行う例です。

→ フォーカス時に myFunc1()、フォーカス離脱時に myFunc2() を実行します。

実際のフォーム例

<form name=”form1″>
  メールアドレス：
  <input type=”text” name=”mail” size=”40″
    onfocus=”this.style.background=’#ffffcc'”
    onblur=”this.style.background=’white'”>
</form>

→ フォーカス時に背景色を変更し、離れたら元に戻す例です。

JavaScript 初心者におすすめの学習書籍

手を動かしながら JavaScript を学びたい方には、初心者向けにやさしく解説された実践型の入門書があります。
実際に動くサンプルを使って学べるため、基本をしっかり身につけたい方に最適です。
→　いちばんやさしい JavaScript の教本

JavaScriptの基礎を体系的に学びたい方には、こちらの書籍がとても分かりやすくおすすめです。
初心者がつまずきやすいポイントを丁寧に解説している入門書です。
→　確かな力が身につくJavaScript「超」入門

体系的に学びたい方へ（スクールという選択肢）

独学の限界を感じやすいポイント

エラーの原因が分からず、調べても解決できない
学習の順番に自信が持てない
モチベーションが続かず、途中で止まってしまう
実務レベルのコードレビューを受ける機会がない

こういった悩みが増えてきたら、「質問できる環境」や「学習ロードマップを一緒に考えてくれる人」がいるだけで、学習効率は大きく変わります。

無料相談で得られるメリット

あなたの現在のレベルに合わせた学習ロードマップを作成してくれる
独学で詰まりやすいポイントを事前に教えてくれる
学習方法の改善点をプロがアドバイスしてくれる
エンジニア転職を考えている場合、キャリア相談も可能

JavaScript を独学で学んでいると、「もっと効率よく理解したい」「プロに質問しながら進めたい」と感じる方も多いです。
そのような方には、未経験からエンジニアを目指せる DMM WEBCAMP の学習コースも選択肢のひとつです。
無料相談では、学習ロードマップの作成やキャリア相談など、独学では得られないサポートを受けられます。

→ DMM WEBCAMP 学習コース（無料相談はこちら）

まとめ

onfocus：要素にフォーカスが当たったときに発生
onblur：要素からフォーカスが離れたときに発生
入力チェック・UI強調・説明表示などに便利
フォーム操作の基本として必ず覚えておきたいイベント

【JavaScript入門】onfocus・onblurの使い方｜入力欄のフォーカス取得・離脱時のイベント処理を解説