・「blur()」と「focus()」の組み合わせ・「blur()」と「focusout()」の違いなどの応用的な使い方に関しても解説していきます。まとめ「blur()」とは?それでは、まず最初に「blur()」について基本的な知識から学習を進めていきましょう!「blur()」は、フォーム要素などでフォーカスが外れたタイミングで処理を実行できるメソッドになります。一般的には次のような「入力フォーム」でよく使われます!入力フォームは、フォーカスが当たると枠線が青色に強調表示されますよね?そして、フォーカスが外れると強調表示が無くなり通常の黒い枠線に戻ります。この瞬間が「フォーカスが外れた」という意味であり、このタイミングで任意の処理を実行することができるわけです。本記事では、「blur()」の基本から応用まで学べるように構成しているのでぜひ参考にしてみてください!「blur()」の使い方この章では、「blur()」の基本的な使い方について見ていきましょう!一般的な構文から実際のプログラミング手法について学んでいきます。基本的な構文と書き方についてまずは、最も基本となる構文から見ていきましょう!「blur()」はフォーカスが外れたかどうかを確認するために、対象となる要素に対して実行するのが基本となります。)一般的に対象要素となるのはフォーム部品であり、例えば「input要素」などが該当するでしょう。引数に関数を指定することができ、この関数内に記述した処理をフォーカスが外れた時に実行するというわけです。非常にシンプルな構文なので、しっかりと書けるように慣れておきましょう!フォーカスが外れた時の関数を設定する方法それでは、実際のプログラミング例を見てみましょう!サンプルとして単純な入力フォームを次のように用意します。type="text"></form>form要素内に「inputタグ」を1つだけ配置しているシンプルな構成です。}この例では、入力フォーム(input)を対象にして「blur()」が実行されているのが分かりますね。引数には関数「sampleEvent」を指定しており、その中でコンソールへ文字列を出力する処理を記述しています。これにより、フォーカスが外れたタイミングでコンソールに指定した文字列が出力されるわけです。先ほどは、別途作成した関数をblur()の引数に指定しました。関数内の処理が単純なものであれば「無名関数」を利用したほうが効率的な場合もあるのでご紹介しておきます!同じように、フォーカスが外れたタイミングで文字列をコンソールへ出力する処理を無名関数を使って記述すると次のようになります。console.log('フォーカスが外れました!');});blur()の引数に注目してください!直接関数を記述しているのが分かりますね。処理の内容はまったく同じですが、blur()の記述と関数が1つにまとまるためコードの可読性や管理が分かりやすくなります。「blur()」と「focus()」の組み合わせjQueryには「blur()」と反対の意味になる「focus()」メソッドもあるので合わせてご紹介しておきます!「blur()」はフォーカスが外れた瞬間に処理を実行しますが、「focus()」はフォーカスされた瞬間に処理を実行します。この2つはペアで使われることも多く、メソッドをチェーンで繋いで記述することも多いのです。console.log('フォーカスが外れました!');}この例では、「focus().blur()」のようにチェーンで繋いで記述しているのがポイントです。これにより、入力フォームにフォーカスされた時と外れた時の両方に対して任意の処理を実行することができるわけです。「blur()」と「focusout()」の違い「blur()」と非常によく似た性質を持つ「focusout()」は間違いやすいメソッドなので合わせて解説をしておきます!どちらのメソッドもフォーカスが外れたタイミングで処理を実行することができます。大きな違いは子要素に対しても同じように処理できるかどうかという点です!例えば、次のようなフォームがあるとします。focusout()」それぞれを実行しています。実行結果に注目してください!focusout()で実行された処理しか出力されていないことが分かりますよね?つまり、blur()はあくまでもフォーカスされた要素(input要素など)に対して外れたかどうかを確認するメソッドなわけです。focusout()も基本的には同じなのですが、子要素にあるフォーム要素にも反応することができる特徴を持っているのです。まとめ今回は、フォーム要素などのフォーカスが外れたタイミングで処理を実行できる「blur()」について学習をしました!最後に、もう一度ポイントをおさらいしておきましょう!・blur()は引数に指定した関数処理をフォーカスが外れたタイミングで実行できる・blur()の反対の意味である「focus()」はフォーカスされた時に処理を実行できる・類似メソッドのfocusout()との違いは子要素にも反応できるかどうかである上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。