jQuery逆引きリファレンス
要素にフォーカスが当たった／外れた時の処理を実装するには？（focus、blur、focusin、focusout）
focus／blurもしくはfocusin／focusoutを使って、テキストボックスにフォーカスを当てた時／外した時に処理を実施する方法を説明。またそれらの挙動の違いを解説する。
別稿「TIPS：イベントに応じて処理を実行するには？」の表でも触れたように、jQueryではさまざまな＜イベント名＞メソッドが標準で用意されています。そのうち、ほとんどが直感的に理解できるものばかりですが、focus／blurとfocusin／focusoutの違いは一見して分かりにくいものです。
本稿では、具体的なサンプルの中で、両者の違いを詳らかにします。
focus／blurとfocusin／focusoutイベントの基本
まずは、これらイベントを利用した具体的なサンプルを見てみます。以下は、テキストボックスにフォーカスを当てた時、フォーカスを外した時、それぞれのタイミングで、フォームの背景色を変化させる例です。
|
<!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>
|
［名前］欄をクリックするなどにしてフォーカスを当てると……
それぞれfocusin／focusoutイベントのタイミングで背景色（background-color）を変更しているわけです。focusin／focusoutをfocus／blurに置き換えても、このサンプルはそのまま動作します。
focus／blurとfocusin／focusoutの違い
基本的な挙動は同じであることを確認できたところで、両者が異なるケースを見ていきます。両者が異なる挙動を採るのは、以下のようなケースです。
以下では、先ほどのリストでテキストボックス（$('#name, #memo')）に対してイベントリスナーを設置していたものを、フォーム（$('myForm')）に対するように書き換えたものです。
|
$('#myForm')
.focusin(function(e) {
$(this).css('background-color', '#ffc');
})
.focusout(function(e) {
$(this).css('background-color', '');
});
|
この場合も、先ほどと同様の結果が得られます。しかし、focus／blurイベントに差し替えてみるとどうでしょう。フォームの背景色が変化しない（＝イベントを検知できていない）ことを確認できます。
このことから分かるように、focus／blurでは、テキストボックス（下位の要素）で発生したイベントを、フォーム（上位の要素）で検知することはできません。いずれを利用するかは、もちろん時と場合によりますが、まずは両者の違いを理解しておくようにしましょう。
処理対象：フォーカス カテゴリ：イベント
API：.focus()／.blur()／.focusin()／.focusout() カテゴリ：Events（イベント） > Form Events ｜ Forms（フォーム）
※以下では、本稿の前後を合わせて5回分（第26回～第30回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
27. アニメーションの細かな挙動を制御するには？（animate／show／hide／fadeIn／fadeOut／slideUp／slideDown）
各種アニメーションメソッドで、アニメーションを直列／並列に実行したり、アニメーション処理ごとに関数を実行したり、プロパティ単位でアニメーションのイージングを設定したりする方法を説明。
28. 【現在、表示中】≫ 要素にフォーカスが当たった／外れた時の処理を実装するには？（focus、blur、focusin、focusout）
focus／blurもしくはfocusin／focusoutを使って、テキストボックスにフォーカスを当てた時／外した時に処理を実施する方法を説明。またそれらの挙動の違いを解説する。
29. JavaScriptとHTMLを明確に分離するには？（data）
jQueryのdataメソッドを使って独自データ属性の値を取得することにより、「控えめなJavaScript」を実現する方法を説明する。
