スライドショー

【jQuery入門】blur()でフォーカスが外れた時の処理方法まとめ!

こんにちは、ライターのマサトです!

今回は、入力フォームなどでフォーカスが外れた時に特定の処理を実行できる「blur()」について学習をしていきましょう!

この記事では、

・「blur()」とは?
・「blur()」の使い方

という基本的な内容から、

・「blur()」と「focus()」の組み合わせ
・「blur()」と「focusout()」の違い

などの応用的な使い方に関しても解説していきます。

この記事で、「blur()」をしっかり学習して自分のスキルアップを目指しましょう!

「blur()」とは?

それでは、まず最初に「blur()」について基本的な知識から学習を進めていきましょう!

「blur()」は、フォーム要素などでフォーカスが外れたタイミングで処理を実行できるメソッドになります。

一般的には次のような「入力フォーム」でよく使われます!
jquery-blur-img1
入力フォームは、フォーカスが当たると枠線が青色に強調表示されますよね?

そして、フォーカスが外れると強調表示が無くなり通常の黒い枠線に戻ります。

この瞬間が「フォーカスが外れた」という意味であり、このタイミングで任意の処理を実行することができるわけです。

本記事では、「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()についての基本から応用までを次の記事でまとめているのでぜひ参考にしてみてください!

jQueryのfocus()によるフォーカス操作まとめ!
更新日 : 2019年5月30日

「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()との違いは子要素にも反応できるかどうかである

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説