Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

要素にフォーカスが当たった/外れた時の処理を実装するには?(focus、blur、focusin、focusout)

2015年10月1日

focus/blurもしくはfocusin/focusoutを使って、テキストボックスにフォーカスを当てた時/外した時に処理を実施する方法を説明。またそれらの挙動の違いを解説する。

  • このエントリーをはてなブックマークに追加

 別稿「TIPS:イベントに応じて処理を実行するには?」の表でも触れたように、jQueryではさまざまな<イベント名>メソッドが標準で用意されています。そのうち、ほとんどが直感的に理解できるものばかりですが、focusblurfocusinfocusoutの違いは一見して分かりにくいものです。

 本稿では、具体的なサンプルの中で、両者の違いを詳らかにします。

focus/blurとfocusin/focusoutイベントの基本

 まずは、これらイベントを利用した具体的なサンプルを見てみます。以下は、テキストボックスにフォーカスを当てた時、フォーカスを外した時、それぞれのタイミングで、フォームの背景色を変化させる例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<form id="myForm">
  <div>
    <label for="name">名前:</label><br />
    <input id="name" type="text" size="20" />
  </div>
  <div>
    <label for="memo">コメント:</label><br />
    <input id="memo" type="text" size="50" />
  </div>
  <div>
    <input type="button" value="送信" />
  </div>
</form>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
  // テキストボックスにフォーカス時、フォームの背景色を変化
  $('#name, #memo')
    .focusin(function(e) {
      $(this).css('background-color', '#ffc');
    })
    .focusout(function(e) {
      $(this).css('background-color', '');
    });
});
</script>
</body>
</html>
テキストボックスへのフォーカスを当てた/外した時に背景色を変えるコード(focus.html)
[名前]欄をクリックするなどにしてフォーカスを当てると……

[名前]欄をクリックするなどにしてフォーカスを当てると……

テキストボックスにフォーカスがある場合にだけ背景色が付く
テキストボックスにフォーカスがある場合にだけ背景色が付く

 それぞれfocusinfocusoutイベントのタイミングで背景色(background-color)を変更しているわけです。focusinfocusoutfocusblurに置き換えても、このサンプルはそのまま動作します。

focus/blurとfocusin/focusoutの違い

 基本的な挙動は同じであることを確認できたところで、両者が異なるケースを見ていきます。両者が異なる挙動を採るのは、以下のようなケースです。

 以下では、先ほどのリストでテキストボックス($('#name, #memo'))に対してイベントリスナーを設置していたものを、フォーム($('myForm'))に対するように書き換えたものです。

JavaScript
$('#myForm')
  .focusin(function(e) {
    $(this).css('background-color', '#ffc');
  })
  .focusout(function(e) {
    $(this).css('background-color', '');
  });
フォーム全体に対してイベントリスナーを設置するコード

 この場合も、先ほどと同様の結果が得られます。しかし、focusblurイベントに差し替えてみるとどうでしょう。フォームの背景色が変化しない(=イベントを検知できていない)ことを確認できます。

 このことから分かるように、focusblurでは、テキストボックス(下位の要素)で発生したイベントを、フォーム(上位の要素)で検知することはできません。いずれを利用するかは、もちろん時と場合によりますが、まずは両者の違いを理解しておくようにしましょう。

処理対象:基本 カテゴリ:イベント
処理対象:フォーカス カテゴリ:イベント
API:.focus()/.blur()/.focusin()/.focusout() カテゴリ:Events(イベント) > Form Events | Forms(フォーム)

※以下では、本稿の前後を合わせて5回分(第26回~第30回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
26. 自作のアニメーションを実行するには?(animate)

animateメソッドを使って、典型的なアニメーションではなく、カスタムのアニメーションを定義する方法を説明する。

jQuery逆引きリファレンス
27. アニメーションの細かな挙動を制御するには?(animate/show/hide/fadeIn/fadeOut/slideUp/slideDown)

各種アニメーションメソッドで、アニメーションを直列/並列に実行したり、アニメーション処理ごとに関数を実行したり、プロパティ単位でアニメーションのイージングを設定したりする方法を説明。

jQuery逆引きリファレンス
28. 【現在、表示中】≫ 要素にフォーカスが当たった/外れた時の処理を実装するには?(focus、blur、focusin、focusout)

focus/blurもしくはfocusin/focusoutを使って、テキストボックスにフォーカスを当てた時/外した時に処理を実施する方法を説明。またそれらの挙動の違いを解説する。

jQuery逆引きリファレンス
29. JavaScriptとHTMLを明確に分離するには?(data)

jQueryのdataメソッドを使って独自データ属性の値を取得することにより、「控えめなJavaScript」を実現する方法を説明する。

jQuery逆引きリファレンス
30. 特定の要素に関連付くデータを取得/設定するには?(data)

現在の要素に対して任意のデータを設定/取得するためのdataメソッドの基本と、利用上の注意点を解説する。

サイトからのお知らせ

Twitterでつぶやこう!