【jQuery】blur()を使ってフォーカスを外した時に処理を行う!

フォーカスを外す時に処理を行うにはjQueryのblur()を使用します。

jQueryのblur()とは要素がフォーカスを外す時のイベントを設定するメソッドであり、テキストフィールドやテキストエリアなどでフォーカスした時のイベント処理を設定することができます。

そして、blur()メソッドをパラメータ無しで使用することで要素のフォーカスを外した時のイベントを間接的に発生させることができます。

また、blur()メソッドはマウスでフォーカスを外した時のイベントを設定すると思いがちですが、マウスでフォーカスを外した時以外でもTapキーや他の要素へのマウスクリック等でblurイベントが発生するようになっています。

フォーカスを外す時のイベントを設定するメソッドはblur()の他にもfocusout()があり、基本は同じ動きをしますが、動きが異なるケースがありますので使い方には注意してください。

今回は、jQueryのblur()を使ってフォーカスを外す時に処理を行う方法について以下の内容で解説していきます。

⚫︎ フォーカスを外す時にイベント処理を行う場合
⚫︎ フォーカスを外す時にデータを渡してイベント処理を行う場合

⚫︎ blur()でフォーカスを外すイベントを間接的に発生させる方法
⚫︎ blur()とfocusout()の違い
⚫︎ blur()の実践的な使い方

ハルトさん

今回はjQueryのblur()でフォーカスが外れた時に処理を行う方法について説明していきます。

さとみさん

お願いします!

blur()とは

blur()とは、指定した要素のフォーカスが外れた際のイベントを設定するメソッドとなります。

blur()の書き方

blur()の書き方は下記となります。

パラメータ

⚫︎ オブジェクトデータ(任意):
フォーカスが外れた時にイベントオブジェクトに渡すデータを指定する(オブジェクトリテラル式で指定)
⚫︎ イベントハンドラ:
フォーカスが外れた時にイベントのアクションを関数で指定する

blur()のパラメータにイベントハンドラを指定することで、要素がフォーカスが外れた時にイベント処理を行うことができます。
また、パラメータにオブジェクトデータとイベントハンドラを指定することで、テータをイベントハンドラに渡して要素がフォーカスが外れた時にイベント処理を行うことができます。

フォーカスを外した時に処理を行うサンプルコード

フォーカスを外した時に処理を行うサンプルコードを紹介します。

フォーカスを外した時にイベント処理を行う場合

フォーカスを外した時にイベント処理を行う場合はblur()のパラメータにイベントハンドラを指定します。

sample.html

style.css

index.js

出力結果

blur()のパラメータにイベントハンドラを指定することで、フォーカスを外した時にイベント処理を指定することができます。
その為、テキストフィールドとテキストエリアからフォーカスを外すと、テキストフィールドやテキストエリアの値がout1クラスやout2クラスにそれぞれ表示されます。

フォーカスを外した時にデータを渡してイベント処理を行う場合

フォーカスを外した時イベントにデータを渡してイベント処理を行う場合はblur()のパラメータにオブジェクトデータとイベントハンドラを指定します。

sample.html

style.css

index.js

出力結果

blur()のパラメータにオブジェクトデータとイベントハンドラを指定することで、指定した要素がフォーカスを外した時にデータを渡してイベント処理を行うことができます。
その為、テキストフィールドにフォーカスを外すとテキストフィールドの値と変数object1を、テキストエリアをフォーカスを外すとテキストエリアの値と変数object2の値が表示されます。

さとみさん

blur()メソッドのパラメータにオブジェクトデータとイベントハンドラを指定することでフォーカスを外した時にデータを渡してイベント処理を行うことができるんですね!

ハルトさん

そうですね。
サンプルコードでは、変数に単数のデータを受け渡していますが、let obj = {old: 50 ,name: ‘Haruto’}のような複数のデータをマップ値として受け渡すこともできます。

blur()でフォーカスを外すイベントを間接的に発生させる方法

blur()でフォーカスを外すイベントを間接的に発生させるにはblur()をパラメータ無しで使用します。

sample.html

index.js

出力結果

blur()メソッドをパラメータなしで使用することで、テキストフィールドやテキストエリアをフォーカスを外した時のイベントを間接的に発生させることができます。
その為、各ボタンを押すとフォーカスを外した時のイベントであるアラートが表示されます。

blur()とfocusout()の違い

フォーカスを外した時にイベントを発生させるメソッドはblur()の他にもfocusout()というメソッドが存在します。
この2つのメソッドはとても類似したメソッドですが、「入り子になっているinput要素に対して親要素をフォーカスを外した場合」に少し異なる動きをします。

sample.html

style.css

index.js

出力結果

blur()メソッドとfopcusin()メソッドで親要素と子要素でフォーカスを外した時の対象とした場合、focusout()メソッドの場合は親要素と子要素にもフォーカスを外した時のイベントが発生していますが、blur()メソッドの場合は親要素にはフォーカスを外した時のイベントが発生していません。

つまり、入り子になっているinput要素で、親要素に割り当ててもイベント発生するのがfocusout()で、直接input要素に割り当てないとイベント発生しないのがblur()となります。

blur()の実践的な使い方

blur()メソッドの実践的な使い方を紹介します。

sample.html

style.css

index.js

出力結果

お問い合わせ画面などで入力欄が空の状態でフォーカスが外れるとエラーチェックとして警告が表示されるようにしています。
そして入力欄に何かが入力されるとフォーカスが外れた時にエラー警告が解除されます。

今回のポイント

blur()でフォーカスが外れた時に処理

⚫︎ フォーカスが外れた時に処理を行うにはjQueryのblur()メソッドを使用する

⚫︎ フォーカスした時にイベント処理を行うにはblur()メソッドのパラメータにイベントハンドラを指定する

⚫︎ フォーカスした時にデータを渡して、イベント処理を行うにはblur()メソッドのパラメータにオブジェクトデータとイベントハンドラを指定する

⚫︎ フォーカスを外すイベントを間接的に発生させるにはblur()をパラメータ無しで使用する

⚫︎ blur()メソッドとfocusout()メソッドの違いは入り子状態のinput要素に対して親要素をフォーカスを外した時の対象とした場合にイベントを発生させるかどうかである

関連記事

jQueryのfocus()でフォーカスされた時に処理を行う方法についてはこちらをご参考ください。

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し