こんにちは、ライターのマサトです！
今回は、入力フォームなどでフォーカスが外れた時に特定の処理を実行できる「blur()」について学習をしていきましょう！
この記事では、
・「blur()」とは？
・「blur()」の使い方
という基本的な内容から、
・「blur()」と「focus()」の組み合わせ
・「blur()」と「focusout()」の違い
などの応用的な使い方に関しても解説していきます。
この記事で、「blur()」をしっかり学習して自分のスキルアップを目指しましょう！
「blur()」とは？
それでは、まず最初に「blur()」について基本的な知識から学習を進めていきましょう！
「blur()」は、フォーム要素などでフォーカスが外れたタイミングで処理を実行できるメソッドになります。
一般的には次のような「入力フォーム」でよく使われます！
入力フォームは、フォーカスが当たると枠線が青色に強調表示されますよね？
そして、フォーカスが外れると強調表示が無くなり通常の黒い枠線に戻ります。
この瞬間が「フォーカスが外れた」という意味であり、このタイミングで任意の処理を実行することができるわけです。
本記事では、「blur()」の基本から応用まで学べるように構成しているのでぜひ参考にしてみてください！
「blur()」の使い方
この章では、「blur()」の基本的な使い方について見ていきましょう！
一般的な構文から実際のプログラミング手法について学んでいきます。
基本的な構文と書き方について
まずは、最も基本となる構文から見ていきましょう！
「blur()」はフォーカスが外れたかどうかを確認するために、対象となる要素に対して実行するのが基本となります。
対象要素.blur( 関数 )
一般的に対象要素となるのはフォーム部品であり、例えば「input要素」などが該当するでしょう。
引数に関数を指定することができ、この関数内に記述した処理をフォーカスが外れた時に実行するというわけです。
非常にシンプルな構文なので、しっかりと書けるように慣れておきましょう！
フォーカスが外れた時の関数を設定する方法
それでは、実際のプログラミング例を見てみましょう！
サンプルとして単純な入力フォームを次のように用意します。
<form>
<input type="text">
</form>
form要素内に「inputタグ」を1つだけ配置しているシンプルな構成です。
そこで、この入力フォームのフォーカスが外れたかどうかを「blur()」で確認してみましょう！
次のサンプル例を見て下さい！
$('input').blur(sampleEvent);
function sampleEvent() {
console.log('フォーカスが外れました！');
}
この例では、入力フォーム(input)を対象にして「blur()」が実行されているのが分かりますね。
引数には関数「sampleEvent」を指定しており、その中でコンソールへ文字列を出力する処理を記述しています。
これにより、フォーカスが外れたタイミングでコンソールに指定した文字列が出力されるわけです。
無名関数を使って処理を記述する方法
先ほどは、別途作成した関数をblur()の引数に指定しました。
しかし、関数内の処理が単純なものであれば「無名関数」を利用したほうが効率的な場合もあるのでご紹介しておきます！
同じように、フォーカスが外れたタイミングで文字列をコンソールへ出力する処理を無名関数を使って記述すると次のようになります。
$('input').blur(function() {
console.log('フォーカスが外れました！');
});
blur()の引数に注目してください！
直接関数を記述しているのが分かりますね。
処理の内容はまったく同じですが、blur()の記述と関数が1つにまとまるためコードの可読性や管理が分かりやすくなります。
「blur()」と「focus()」の組み合わせ
jQueryには「blur()」と反対の意味になる「focus()」メソッドもあるので合わせてご紹介しておきます！
「blur()」はフォーカスが外れた瞬間に処理を実行しますが、「focus()」はフォーカスされた瞬間に処理を実行します。
この2つはペアで使われることも多く、メソッドをチェーンで繋いで記述することも多いのです。
次のサンプル例を見て下さい！
$('input').focus(focusEvent).blur(blurEvent);
function focusEvent() {
console.log('フォーカスされました！');
}
function blurEvent() {
console.log('フォーカスが外れました！');
}
この例では、「focus().blur()」のようにチェーンで繋いで記述しているのがポイントです。
これにより、入力フォームにフォーカスされた時と外れた時の両方に対して任意の処理を実行することができるわけです。
ちなみに、focus()についての基本から応用までを次の記事でまとめているのでぜひ参考にしてみてください！
「blur()」と「focusout()」の違い
「blur()」と非常によく似た性質を持つ「focusout()」は間違いやすいメソッドなので合わせて解説をしておきます！
どちらのメソッドもフォーカスが外れたタイミングで処理を実行することができます。
しかし、最も大きな違いは子要素に対しても同じように処理できるかどうかという点です！
例えば、次のようなフォームがあるとします。
<form>
<input type="text">
</form>
この時に、「form要素」に対して「blur()」「focusout()」それぞれのメソッドを実行するとどうなるかを見てみましょう！
$('form').blur(blurEvent);
$('form').focusout(focusoutEvent);
function blurEvent() {
console.log('blur()から実行されました！');
}
function focusoutEvent() {
console.log('focusout()から実行されました！');
}
実行結果
focusout()から実行されました！
この例では、「form要素」に対して「blur() / focusout()」それぞれを実行しています。
しかし、実行結果に注目してください！
focusout()で実行された処理しか出力されていないことが分かりますよね？
つまり、blur()はあくまでもフォーカスされた要素（input要素など）に対して外れたかどうかを確認するメソッドなわけです。
focusout()も基本的には同じなのですが、子要素にあるフォーム要素にも反応することができる特徴を持っているのです。
まとめ
今回は、フォーム要素などのフォーカスが外れたタイミングで処理を実行できる「blur()」について学習をしました！
最後に、もう一度ポイントをおさらいしておきましょう！
・blur()は引数に指定した関数処理をフォーカスが外れたタイミングで実行できる
・blur()の反対の意味である「focus()」はフォーカスされた時に処理を実行できる
・類似メソッドのfocusout()との違いは子要素にも反応できるかどうかである
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
