JavaScriptでblurイベントを使ったフォーカスの外し方14選

●blurイベントとは？

Webサイトを作る上で、フォームの入力フィールドやボタンなどにフォーカスを当てたり外したりする機能は欠かせません。

JavaScriptでは、そのようなフォーカス制御を行うためのイベントが用意されています。

今回は、その中でもblurイベントについて詳しく見ていきましょう。

blurイベントは、フォーカスが外れたときに発生するイベントです。

ユーザーがフォームの入力を終えてフィールドの外をクリックしたり、Tabキーで次の要素に移動したりした際に、blurイベントが発火します。

このイベントを監視することで、フォーカスが外れたタイミングで入力内容のチェックや、別の処理を実行することができるのです。

○blurイベントの概要

JavaScriptにおけるblurイベントは、DOM（Document Object Model）のフォーカスイベントの一種です。

フォーカスイベントには、このblurの他にfocusやfocusinなどがあります。

これらのイベントを使い分けることで、フォーカスの状態に応じた柔軟な制御が可能になります。

blurイベントは、主にフォーム要素で使用されます。

テキスト入力欄やセレクトボックス、チェックボックスなどの要素で、フォーカスが外れた際に何らかの処理を行いたい場合に活用します。

たとえば、入力内容のバリデーションチェックや、自動保存、表示の切り替えなどに利用できます。

○blurイベントが発火するタイミング

それでは、具体的にblurイベントが発火するタイミングを見ていきましょう。

次のような場合に、blurイベントが発生します。

・フォーカスが当たっている要素の外側をクリックした時
・フォーカスが当たっている要素からTabキーで次の要素に移動した時
・フォーカスが当たっている要素でEnterキーを押して送信した時
・JavaScriptのfocus()メソッドを使って、別の要素にフォーカスを移動させた時

つまり、何らかの方法でフォーカスが外れると、そのタイミングでblurイベントが発火するわけですね。

これを監視することで、「フォーカスを失った後に行いたい処理」を実装できるというわけです。

○サンプルコード1：基本的なblurイベントの使い方

blurイベントの基本的な使い方は、次のようになります。

// 要素を取得
const input = document.querySelector('input');

// blurイベントを監視
input.addEventListener('blur', function() {
  console.log('フォーカスが外れました');
});

このコードでは、まずquerySelectorを使ってフォーカスを監視したい要素を取得しています。

今回の例ではinput要素ですが、他のフォーム部品でも同様です。

次に、addEventListenerメソッドを使ってblurイベントのリスナーを登録しています。

これで、input要素からフォーカスが外れると、コールバック関数内の処理が実行されます。

この例では単純にログ出力していますが、実際にはここでバリデーションチェックなどを行うわけですね。

blurイベントを使いこなすことで、フォームのユーザビリティを大きく向上できます。

入力と連動したリアルタイムなフィードバックによって、ユーザーは快適に操作できるようになるでしょう。

次項では、blurと似たイベントであるfocusoutとの違いについて解説します。

●blurイベントとfocusoutイベントの違い

前項ではblurイベントの基本的な使い方を見てきましたが、実はblurイベントと似たような働きをするイベントとして「focusout」というものがあります。

初めてJavaScriptのイベント処理に挑戦する方にとっては、この2つの違いがよくわからないというケースも多いのではないでしょうか。

そこで本項では、blurイベントとfocusoutイベントの違いについて詳しく解説します。

一見同じように見えるこの2つのイベントですが、動作の仕組みにはいくつか重要な違いがあります。

これらを正しく理解することが、状況に合ったイベントの使い分けに繋がります。

○focusoutイベントの概要

まず、focusoutイベントの概要から見ていきましょう。

focusoutイベントは、blurイベントと同様にフォーカスが外れた時に発生するイベントです。

このイベントもやはりDOM Level 3 Eventsで定義されており、対応しているブラウザも広いです。

一方で、blurとfocusoutの大きな違いは「バブリング」の有無にあります。

バブリングとは、子要素で発生したイベントが親要素へと伝播していく仕組みのことを指します。

blurイベントではこのバブリングは発生しませんが、focusoutイベントではバブリングが発生するのです。

この違いを知っておくことは、イベントの伝播をコントロールする上でとても重要です。

バブリングを活用すれば、親要素に一括でイベントを設定できるので、コードをスッキリ書けるメリットがあります。

○blurとfocusoutの発火順序

続いて、blurとfocusoutの発火順序についても触れておきましょう。

実は、同じ要素に対してblurとfocusoutの両方を設定した場合、必ずblurの方が先に発生します。

これは、仕様で定められた順序になっています。

この発火順序を理解しておくことで、より精密なフォーカス制御が可能になります。

たとえば、blurイベントでの処理が終わった後に、focusoutイベントで追加の処理を行うといった使い方ができるわけですね。

一方、blurとfocusoutで同じ処理を重複して実行してしまうと、無駄な処理になってしまうので注意が必要です。

時と場合に応じて、適切な方を選ぶようにしましょう。

○サンプルコード2：blurとfocusoutの使い分け

それでは、blurとfocusoutの具体的な使い分け方を見ていきましょう。

次のコードは、親要素と子要素でフォーカスイベントを監視する例です。

<div id="parent">
  <input type="text" id="child">
</div>

const parent = document.getElementById('parent');
const child = document.getElementById('child');

// 子要素のblurを監視
child.addEventListener('blur', function() {
  console.log('child blur');
});

// 親要素のfocusoutを監視  
parent.addEventListener('focusout', function() {
  console.log('parent focusout');
});

このコードでは、子要素（input）ではblurイベントを、親要素（div）ではfocusoutイベントを監視しています。

子要素のフォーカスが外れると、次のようなログが出力されるはずです。

child blur 
parent focusout

ここからわかる通り、focusoutはバブリングによって親要素にも伝播されるのです。

一方でblurイベントは子要素だけで発生し、親要素へは伝播されません。

●jQueryでのblurイベントの使い方

ここまでは生のJavaScript（バニラJS）でのblurイベントの使い方を見てきましたが、みなさんの中にはjQueryの方が馴染み深いという方も多いのではないでしょうか。

jQueryは長らくWebサイト制作に欠かせないライブラリとして親しまれてきました。

特にDOM操作やイベント処理の分野では、その簡潔で直感的な記述が大きな支持を集めています。

そこで本項では、jQueryを使ったblurイベントの実装方法についてもしっかり抑えておきましょう。

バニラJSに比べると、より短いコードでスマートに書けるのが魅力です。

とはいえ、基本的な考え方は同じなので、これまでの学びを活かしていきましょう。

○jQueryでblurイベントを設定する

jQueryでblurイベントを設定するには、onメソッドまたはblurメソッドを使用します。

どちらを使っても構いませんが、onメソッドの方が汎用性が高く、他のイベントにも使えるのでおすすめです。

それでは具体的な書き方を見ていきましょう。

○サンプルコード3：jQueryでのblurイベント

// on メソッドを使う場合
$('#myInput').on('blur', function() {
  console.log('blurイベント発生！');
});

// blur メソッドを使う場合
$('#myInput').blur(function() {
  console.log('blurイベント発生！');
});

とてもシンプルですね。

$はjQueryの基本的な書き方で、HTMLの要素を簡単に選択できます。

今回はid属性がmyInputの要素を指定していますが、classやtagNameでも大丈夫です。

そして、onメソッドの第一引数にはイベント名を、第二引数にはコールバック関数を渡します。

blurメソッドであれば、引数はコールバック関数のみです。

どちらもコールバック関数の中に、blurイベント発生時の処理を記述するわけですね。

気をつけたいのが、jQueryを使うためには、HTMLでjQueryのライブラリを読み込んでおく必要があることです。

<script>タグを使って、CDNなどから読み込むのが一般的ですね。

○サンプルコード4：jQueryでのfocusoutイベント

前項のfocusoutイベントも、jQueryを使えばもっと手軽に書けます。

先ほどのコード例をjQueryで書き直すとこんな感じです。

// 親要素のfocusoutを監視
$('#parent').on('focusout', function() {  
  console.log('focusoutイベント発生！');
});

バニラJSに比べて、かなりスッキリしたコードになりましたね。addEventListenerなどを使わずに、シンプルにイベントを設定できるのは魅力的です。

jQueryは内部的に面倒な処理を隠蔽してくれているので、開発者はロジックに集中できるのです。

とはいえ、jQueryに頼りすぎるのもよくありません。

昨今は生のJavaScriptでの開発が主流になりつつあり、jQueryから徐々に脱却する動きも見られます。

基本的にはバニラJSをメインに学び、必要に応じてjQueryも使えるようにしておくのがベストな学習方針だと思います。

●blurイベントでフォーカスを外す10の方法

さて、ここまでblurイベントの基礎知識やjQueryでの使い方を解説してきましたが、実際のWebサイト制作の現場では、もっと具体的なユースケースに即した実装が求められます。

単にフォーカスを外すだけでなく、そのタイミングで何らかの処理を行ったり、特定の条件下でのみblurさせたりと、様々な応用が考えられるでしょう。

そこで本項では、blurイベントを活用したフォーカス制御のテクニックをご紹介します。

実際のプロジェクトですぐに役立つ、実践的なコード例ばかりを集めました。

初学者の方はもちろん、既にJavaScriptの経験がある方にも、新たな発見があるのではないでしょうか。

それでは、ひとつずつ見ていきましょう！きっとあなたのコーディングの引き出しが広がるはずです。

○サンプルコード5：フォーカスを外すボタンを作る

ユーザーの明示的なアクションでフォーカスを外したい場合、専用のボタンを用意するのが手軽な方法です。

「フォーカスを外す」というテキストのボタンをクリックすると、指定した要素からフォーカスが外れるサンプルコードを見てみましょう。

<input type="text" id="myInput">
<button id="blurButton">フォーカスを外す</button>

const input = document.getElementById('myInput');
const button = document.getElementById('blurButton');

button.addEventListener('click', function() {
  input.blur(); // フォーカスを外す
});

jQueryだともっとシンプルに書けますね。

$('#blurButton').on('click', function() {
  $('#myInput').blur();
});

このように、JavaScriptから能動的にblurメソッドを呼び出すことで、任意のタイミングでフォーカスを外すことができます。

入力の確定や、次の要素への移動など、UIフローの制御に役立つテクニックだと思います。

○サンプルコード6：Enterキーでフォーカスを外す

フォームの入力欄では、Enterキーを押したらフォーカスを外したいというニーズがあります。

下記のコードは、inputにフォーカスがある状態でEnterを押すと、blurイベントが発火する例です。

$('#myInput').on('keydown', function(event) {
  if (event.key === 'Enter') {
    $(this).blur(); // Enterキーが押されたらフォーカスを外す
  }
});

ポイントは、keydownイベントを監視して、event.keyプロパティでキー名をチェックすることです。

こうすることで、Enterキー以外のキー入力は無視できます。

バニラJSでも同様の実装が可能ですが、event.keyが使えない古いブラウザもあるので注意が必要です。

その場合はevent.keyCodeで代替するなどの配慮も必要になります。

○サンプルコード7：他の要素をクリックでフォーカスを外す

ユーザーが入力欄以外の領域をクリックした時、自動的にフォーカスを外すのも便利な機能です。

次のサンプルは、ドキュメント全体に対してclickイベントを監視し、クリックされた要素がinput自身でない場合にblurを呼び出しています。

$(document).on('click', function(event) {
  if (!$(event.target).is('#myInput')) {
    $('#myInput').blur(); // inputがクリックされた時以外はフォーカスを外す
  }
});  

isメソッドを使って、クリックされた要素（event.target）がinputかどうかを判定しているのがミソですね。

これを応用すれば、特定の領域内のクリックでのみフォーカスを外す、といったカスタマイズも可能です。

○サンプルコード8：フォーカスを外した後の処理

フォーカスが外れた後に何らかの処理を行いたい場合は、blurイベントのコールバック関数内に処理を記述します。

例えば次のコードは、フォーカスが外れた時にログを出力し、入力内容をチェックしています。

$('#myInput').on('blur', function() {
  console.log('フォーカスが外れました');

  const inputValue = $(this).val();
  if (inputValue === '') {
    alert('入力が空です！');
  } else {
    console.log(`入力値：${inputValue}`);
  }
});

この例ではアラートを使っていますが、実際には非同期の通信処理を行ったり、DOMを操作したりと、様々な応用が考えられます。

大事なのは、blurのタイミングでどのような処理が必要になるかを見極めることですね。

○サンプルコード9：フォーカスを戻す

状況によっては、一旦外れたフォーカスを再び戻したい場合もあります。

その場合は、focusメソッドを呼び出せば大丈夫です。

$('#myInput').on('blur', function() {
  const inputValue = $(this).val();
  if (inputValue === '') {
    alert('入力が空です！');
    $(this).focus(); // 入力欄が空の時はフォーカスを戻す
  }
});  

ここでは、入力内容が空の時はフォーカスを外さずに alert でメッセージを表示し、再度フォーカスを当てています。

必須入力のチェックや、入力ミスがあった際の案内などに使えそうですね。

ただ、focus と blur の呼び出しが連続すると、予期せぬ動作になる可能性もあるので、過剰な使用は控えましょう。

○サンプルコード10：特定の要素だけフォーカスを外さない

最後に、特定の要素に対してはblurさせたくない場合の対処法をご紹介します。

例えば、ツールチップやドロップダウンメニューなど、フォーカスが外れると困る要素があるかもしれません。

そんな時は、stopPropagationメソッドを使ってblurイベントの伝播を止めてしまいましょう。

<input type="text" id="myInput">
<div id="tooltip">ツールチップ</div>

$('#myInput').on('blur', function(event) {
  if (!$(event.relatedTarget).is('#tooltip')) {
    // ツールチップ以外の要素にフォーカスが移った時の処理
  }
});

$('#tooltip').on('blur', function(event) {
  event.stopPropagation(); // ツールチップではblurイベントを伝播させない
});

relatedTargetプロパティを使うことで、フォーカスが移った先の要素を参照できます。

そこがツールチップでなければ、blurイベントを発生させるわけですね。

一方、ツールチップ自体のblurイベントでは、stopPropagationでイベントの伝播を止めることで、意図しないブラーを防げます。

●blurイベントを使う際のよくあるエラーと対処法

前項まででblurイベントの基本的な使い方や実践的なテクニックを学んできましたが、実際にコーディングしていると、思わぬエラーに遭遇することがあります。

特に、JavaScriptやjQueryに不慣れな方にとっては、原因の特定に苦労するケースも多いのではないでしょうか。

エラーが発生すると、せっかく実装したblurイベントが正しく動作しなかったり、ページ全体の表示に不具合が生じたりと、様々な問題が起こり得ます。

プロジェクトの納期が迫っている中で、こうしたトラブルに巻き込まれるのは避けたいところです。

そこで本項では、blurイベントを使う際によく遭遇するエラーとその対処法を3つピックアップしてご紹介します。

基本的な考え方から、具体的なコードの修正方法まで、丁寧に解説していきますので、ぜひ参考にしてみてください。

これらのポイントを押さえておけば、blurイベント関連のエラーにもすばやく対処できるようになるはずです。

開発の生産性を高め、ユーザーに優れたUXを提供するためにも、エラーへの対処スキルは欠かせません。

一緒にステップアップしていきましょう！

○blurイベントが効かない場合の原因と対処

まずは、「blurイベントが効かない」という症状が出たときの対処法です。

これは、イベントハンドラが正しく設定されていない場合や、セレクターの指定ミスなどが原因で起こるエラーです。

最初に確認したいのが、JavaScriptやjQueryのコードが正しい位置に記述されているかどうかです。

<script>タグの位置が適切でないと、HTMLの要素が読み込まれる前にイベントハンドラが実行されてしまい、うまく機能しません。

<head>
  ...
  <script src="script.js"></script> <!-- headタグ内で読み込むのはNG -->
</head>
<body>
  ...
</body>

<script>タグは、<body>タグの閉じタグ直前に記述するのがベストプラクティスです。

そうすることで、HTMLの要素がすべて読み込まれてからJavaScriptが実行されるため、エラーを防げます。

<head>
  ...
</head>
<body>
  ...
  <script src="script.js"></script> <!-- bodyタグの最後で読み込むのがベター -->
</body>

また、jQueryを使う場合は、jQueryのライブラリを先に読み込んでおく必要があります。

この順序が逆になっていると、$関数が未定義というエラーが発生します。

<script src="script.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- jQueryを後から読み込むのはNG -->

正しくは、jQueryを先に、自作のスクリプトを後から読み込むようにします。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script> <!-- 順序に注意 -->  

もう1つの原因として考えられるのが、セレクターの指定ミスです。

下記のようなコードで、id属性の指定が誤っていると、blurイベントが機能しません。

<input type="text" id="my-input">

// idの指定が間違っている
$('#myInput').on('blur', function() {
  console.log('blurイベント発生！');
});  

セレクターとid属性の値があっているか、今一度確認してみましょう。

細かいタイプミスも厄介なエラーの原因になり得ます。

○フォーカスが外れないときの原因と対処

次に、「フォーカスが外れない」というエラーへの対処法をお伝えします。

これは、blurイベントのコールバック関数内で、再度フォーカスを当ててしまっているケースが多いです。

例えば、次のようなコードがあるとします。

$('#myInput').on('blur', function() {
  // ajaxリクエストを送信
  $.ajax({
    url: '/validate',
    method: 'POST',  
    data: { input: $(this).val() },
    success: function(response) {
      if (!response.ok) {
        alert('入力内容にエラーがあります！');
        $('#myInput').focus(); // blurイベント内でフォーカスを当てているのがNG
      }
    }
  });
});

ここでは、blurイベント発生時にajaxでサーバーにリクエストを送り、入力値のバリデーションを行っています。

もし、バリデーションエラーがあった場合は、アラートを表示した上で、再度入力欄にフォーカスを当てています。

しかし、これだとfocusメソッドによって強制的にフォーカスが戻されるため、「フォーカスが外れない」という状態になってしまいます。

こうした問題を避けるためには、フォーカスの制御は慎重に行う必要があります。

例えば、バリデーションエラーの場合は、フォーカスを戻すのではなく、エラーメッセージを表示するだけにするのも1つの方法です。

あるいは、setTimeoutなどを使って、フォーカスを当てるタイミングを遅らせるのも有効かもしれません。

状況に応じた柔軟な対応を心がけましょう。

ユーザビリティを損なわないよう、できるだけ自然なフォーカス制御を目指すことが大切ですね。

○IEやEdgeでblurが動かない場合の対処

最後は、ブラウザ特有の問題として、「IEやEdgeでblurイベントが動かない」というケースの対処法です。

これは、一部のバージョンのIEやEdgeでは、blurイベントの発生タイミングが他のブラウザと異なることが原因です。

具体的には、IEではblurイベントが非同期で発生するため、想定外のタイミングでコールバック関数が実行されてしまうのです。

この問題を回避するには、setTimeout を使ってイベント処理を遅延させる方法があります。

$('#myInput').on('blur', function() {
  var element = this;
  setTimeout(function() {
    // blurイベントの処理をここに記述する
    console.log('ブラーしました！');
    var value = $(element).val();
    // ...
  }, 0);
});  

ここでは、blurイベントのコールバック関数の中で、setTimeoutを使って即時関数を呼び出しています。

これにより、blurイベントの処理が非同期で実行されるようになり、IEでも正しく動作するようになります。

ただし、この方法はすべてのブラウザで一律に遅延処理を行うため、パフォーマンスに影響を与える可能性があります。

そのため、IEやEdge特有の問題であることが明らかな場合にのみ、このテクニックを使うようにしましょう。

より望ましい方法としては、ブラウザ判定を行って、IEとEdgeの場合だけsetTimeoutを使う、といった処理の切り分けも考えられます。

JavaScript の UAParser ライブラリなどを活用すれば、比較的簡単にブラウザ判定ができるでしょう。

var ua = new UAParser().getBrowser().name;
$('#myInput').on('blur', function() {
  var element = this;
  if (ua === 'IE' || ua === 'Edge') {
    // IEとEdgeの場合は遅延処理
    setTimeout(function() {
      blurCallback(element);
    }, 0);
  } else {
    // そのほかのブラウザではそのまま実行
    blurCallback(element);
  }
});

function blurCallback(element) {
  // blurイベントの処理を関数に切り出す
  console.log('ブラーしました！');
  var value = $(element).val();
  // ...  
}

コードが少し長くなりましたが、ブラウザ判定を行うことで、無駄な遅延処理を避けることができます。

さらに、blurイベントの処理は専用の関数に切り出すことで、コードの可読性も高まっています。

このように、ブラウザ固有の問題に悩まされることもあるかもしれませんが、適切な対処法を知っておけば、安心して開発を進められるでしょう。

●blurイベントの応用例

これまでに学んだblurイベントの基礎知識やテクニックを活かせば、Webサイトのユーザビリティを大きく向上させられるでしょう。

しかし、実際の開発現場では、もっと複雑で実践的なユースケースに対応する必要があります。

単純なフォーカス制御だけでなく、入力値のチェックや、データの保存、検索候補の表示など、様々な処理とblurイベントを組み合わせる場面が出てくるはずです。

そこで本項では、より実戦的なblurイベントの応用例を4つ厳選してご紹介します。

これらの事例を通して、blurイベントの活用の幅を広げていきましょう。

コードを読み解くことで、JavaScript/jQueryの実装スキルも磨かれるはずです。

実際のプロジェクトでは、これらのサンプルをベースにしつつ、要件に合わせてカスタマイズしていくことになるでしょう。

ぜひ、自分の手を動かして試してみてください。

きっと、Webフロントエンド開発の醍醐味を味わえるはずです。

それでは、具体的なコード例を見ていきましょう！

○サンプルコード11：入力チェックとエラー表示

最初の応用例は、フォームの入力値をチェックし、エラーメッセージを表示する処理です。

具体的には、テキスト入力欄からフォーカスが外れた時に、入力内容が空欄でないかをチェックし、空欄の場合はエラーメッセージを表示するという流れです。

<form>
  <div>
    <label for="username">ユーザー名：</label>
    <input type="text" id="username" name="username" required>
    <span class="error"></span>
  </div>
  <div>
    <label for="email">メールアドレス：</label>
    <input type="email" id="email" name="email" required>
    <span class="error"></span>
  </div>
  <button type="submit">送信</button>
</form>

$(function() {
  // 入力欄のblurイベントを監視
  $('input').on('blur', function() {
    var inputValue = $(this).val();
    var errorBox = $(this).next('.error');

    if (inputValue === '') {
      // 入力値が空の場合はエラーを表示
      errorBox.text('この項目は必須です。');
    } else {
      // 入力値がある場合はエラーを消去
      errorBox.text('');
    }
  });
});

ポイントは、HTML側で<span class="error">という要素を用意しておくことです。

そして、blurイベントのコールバック関数の中で、next()メソッドを使ってその要素を取得し、エラーメッセージを設定しています。

こうしておけば、ユーザーが入力し忘れていた場合でも、フォーカスが外れた時点でエラーに気づくことができます。

送信ボタンを押してからエラーが表示されるよりも、UIとしてフレンドリーな印象を与えられるでしょう。

○サンプルコード12：自動保存機能

2つ目は、入力内容を自動的に保存する機能の実装例です。

これは、ユーザーの入力途中のデータを保護するためのテクニックで、特に長文のフォームで重宝します。

$(function() {
  var timer;

  // 入力欄のblurイベントを監視  
  $('#content').on('blur', function() {
    // タイマーをクリア
    clearTimeout(timer);

    // 1秒後に保存処理を実行
    timer = setTimeout(function() {
      var content = $('#content').val();

      // 入力内容をローカルストレージに保存
      localStorage.setItem('content', content);
      console.log('自動保存しました。');
    }, 1000);
  });

  // 保存されたデータを復元 
  var savedContent = localStorage.getItem('content');
  if (savedContent) {
    $('#content').val(savedContent);
  }
});

ここでのミソは、setTimeout()を使って一定時間後に保存処理を行う点です。

ユーザーが入力を止めてフォーカスを外した後、すぐにサーバーに送信するのは非効率的ですからね。

代わりに、1秒程度の遅延を設けることで、無駄なリクエストを減らせます。

保存した内容は、localStorageを使ってブラウザ上に格納しています。

もちろん、サーバーサイドのDBに保存する方法もありますが、手軽さと速度の面からローカルストレージを使うのがおすすめです。

このコードには、ページの読み込み時に、過去に保存したデータを復元する処理も含まれています。

こうしておけば、ユーザーが誤って画面を閉じてしまった場合でも、入力途中のデータを失わずに済みますね。

○サンプルコード13：オートコンプリート

3つ目の応用例は、オートコンプリート（検索候補の自動表示）の実装です。

Googleの検索窓のように、ユーザーの入力に応じて推測される検索ワードをリアルタイムに表示する機能ですね。

<input type="text" id="search">
<ul id="suggestions"></ul>

$(function() {
  var fruits = ['Apple', 'Apricot', 'Avocado', 'Banana', 'Blackberry', 'Blueberry', 'Cherry', 'Coconut', 'Cranberry', 'Durian', 'Grape', 'Grapefruit', 'Guava', 'Kiwi', 'Lemon', 'Lime', 'Mango', 'Melon', 'Orange', 'Papaya', 'Peach', 'Pear', 'Pineapple', 'Plum', 'Pomegranate', 'Raspberry', 'Strawberry', 'Watermelon'];

  // 入力欄のblurイベントを監視                 
  $('#search').on('blur', function() {
    // 候補リストを空にする
    $('#suggestions').empty();
  });

  // 入力欄のkeyupイベントを監視
  $('#search').on('keyup', function() {
    var searchTerm = $(this).val().toLowerCase();

    // 候補リストを空にする 
    $('#suggestions').empty();

    // 検索ワードに部分一致する果物を探す
    var matches = fruits.filter(function(fruit) {
      return fruit.toLowerCase().indexOf(searchTerm) !== -1;
    });

    // 候補リストに表示
    matches.forEach(function(match) {
      $('#suggestions').append(`<li>${match}</li>`);
    }); 
  });
});

keyupイベントを監視することで、ユーザーが1文字入力するたびに候補リストを更新しています。

そして、blurイベントが発生したら、候補リストを空にするようにしていますね。

また、今回は果物の名前を配列で持っていますが、実際にはサーバーサイドのデータベースに問い合わせることになるでしょう。

その場合は、keyupイベントの中で非同期通信を行い、サーバーから取得した候補をリストに反映させるという流れになります。

○サンプルコード14：タブ移動の制御

最後は、タブキーによるフォーカス移動を制御する例です。

通常、タブキーを押すとフォーカスは次の入力可能な要素に移動しますが、場合によっては特定の要素をスキップさせたいこともあります。

<form>
  <div>
    <label>ユーザー名：<input type="text" name="username"></label>
  </div>
  <div>
    <label>メールアドレス：<input type="email" name="email"></label>
  </div>
  <div>
    <label><input type="checkbox" name="terms">利用規約に同意する</label>
  </div>
  <button type="submit">送信</button>
</form>

$(function() {
  // チェックボックスの状態を監視
  var $terms = $('input[name="terms"]');

  $terms.on('blur', function() {
    // チェックボックスにチェックが入っていない場合
    if (!$(this).prop('checked')) {
      // 送信ボタンをdisabledにする
      $('button[type="submit"]').prop('disabled', true);
    }
  });

  // チェックボックス以外の入力欄のタブイベントを監視
  $('input:not([name="terms"])').on('keydown', function(e) {
    if (e.key === 'Tab' && !e.shiftKey) {
      e.preventDefault();

      if ($terms.prop('checked')) {
        // 利用規約にチェックが入っていればフォーカスを送信ボタンに移動
        $('button[type="submit"]').focus();
      } else {
        // チェックが入っていない場合はチェックボックスにフォーカスを移動 
        $terms.focus();
      }
    }
  });
});

ここでは、利用規約のチェックボックスにチェックが入っていない場合、送信ボタンをスキップしてチェックボックスに強制的にフォーカスを移動させています。

逆に、チェックが入っている場合は、通常通り送信ボタンにフォーカスが移るようにしています。

こうすることで、ユーザーに利用規約への同意を促すことができます。

ただし、あまり強引な誘導は好ましくありません。

必要に応じて、説明文を追加したり、エラーメッセージを表示したりするなど、UXデザインにも配慮しましょう。

まとめ

JavaScriptのblurイベントは、Webサイトのユーザビリティを高めるために欠かせない機能ですね。

フォームの入力欄からフォーカスが外れたタイミングで、バリデーションチェックや自動保存、オートコンプリートなど、さまざまな処理を行えるのが大きな魅力です。

本記事では、blurイベントの基本的な使い方から、focusoutイベントとの違い、jQueryでの実装方法、実践的なテクニックや応用例まで、網羅的に解説してきました。

サンプルコードを交えながら、初心者にもわかりやすく、ポイントを押さえた内容になっているのではないでしょうか。

大切なのは、常にユーザー目線に立って、使い勝手の良いUIを設計することです。

blurイベントはあくまでも手段であって、目的はWebサイトの価値を高めることにあります。

そのことを忘れずに、ユーザーに寄り添ったインタラクションを追求していきたいものです。

本記事が、あなたのJavaScriptスキルの向上に少しでも役立てば幸いです。

ぜひ、ここで学んだテクニックを実践の場で活かしてみてください。

きっと、Webフロントエンド開発の面白さや奥深さを実感できるはずです。