この記事で分かること
onfocus・onblurイベントの役割と仕組み- フォーカス取得・離脱時に処理を実行する方法
- HTML と JavaScript での書き方
- フォーム入力チェックや UI 強調の基本
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()">
→ フォーカス時に myFunc1()、フォーカス離脱時に myFunc2() を実行します。
実際のフォーム例
<form name="form1">
メールアドレス：
<input type="text" name="mail" size="40"
onfocus="this.style.background='#ffffcc'"
onblur="this.style.background='white'">
</form>
→ フォーカス時に背景色を変更し、離れたら元に戻す例です。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- 基本文法を順序立てて理解したい
onfocus・onblur はフォーム操作の基礎であり、書籍ではこれらを体系的に順序立てて学べるため、
入力チェックや UI 制御の理解が深まりやすくなります。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
フォーカス時の UI 変化やイベント処理の基本を、サンプルを通して丁寧に理解できます。
この本で解決できること：
onfocus/onblurの動作を視覚的に理解できる- フォーム入力とイベント処理の関係が分かる
- 実際に動くサンプルで学べるため挫折しにくい
確かな力が身につく JavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
フォーカス制御・入力チェック・イベントの仕組みを深く理解し、実務レベルのフォーム実装が身につきます。
この本で解決できること：
onfocus/onblurの動作原理を体系的に理解できる- 入力チェックや UI 制御など実務的な実装が学べる
- 現代的な JavaScript の書き方が理解できる
動画で理解を深めたい方へ（Udemy講座）
onfocus・onblur は「入力欄のフォーカス取得・離脱」を扱うイベントで、
実際のフォーム操作を動画で見ると理解が一気に深まります。
Udemy では、フォーム操作やイベント処理を初心者向けに丁寧に解説した講座が多数あります。
初心者のためのJavaScript 完全入門
関数・条件分岐・イベントなど、JavaScriptの基礎を体系的に学べる人気講座です。
この講座で解決できること：
onfocus/onblurの動作を視覚的に理解できる- フォーム入力チェックの基本が分かる
- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
基礎から応用まで幅広く学べる講座で、フォーム操作や UI 制御をさらに深めたい方に最適です。
この講座で解決できること：
- フォーカス制御と入力チェックの実務的な実装を理解できる
- イベント処理と DOM 操作の連携が身につく
- 現代的な JavaScript の書き方をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
onfocus/onblurの使い分けで混乱しやすい- 入力チェックの設計が難しい
- コードレビューを受ける機会がない
- 学習の順番に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、
フォーカス制御やフォーム入力チェックなど、つまずきやすい部分を丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすい部分を事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
onfocus・onblur に関するよくある質問（FAQ）
onfocus と onclick の違いは？
onfocus は「フォーカスが当たった瞬間」、onclick は「クリックされた瞬間」に発生します。
onblur は Enter キーでも発生する？
Enter キーでは発生しません。フォーカスが別の要素へ移動したときに発生します。
フォーム全体でフォーカス制御をしたい場合は？
form 要素内の input や textarea に個別に onfocus / onblur を設定するのが一般的です。
フォーカス時に説明文を表示するには？
onfocus 内で別要素の表示切り替えを行うことで実現できます。
まとめ
onfocus：要素にフォーカスが当たったときに発生onblur：要素からフォーカスが離れたときに発生- 入力チェック・UI強調・説明表示などに便利
- フォーム操作の基本として必ず覚えておきたいイベント
