【jQuery】focus()を使ってフォーカスされた時に処理を行う!

フォーカスされた時に処理を行うにはjQueryのfocus()を使用します。

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

そして、focus()メソッドをパラメータ無しで使用することでテキストフィールドやテキストエリアを直接フォーカスしなくても間接的にフォーカスさせることができます。

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

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

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

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

⚫︎ focus()でフォーカスイベントを発生させる方法
⚫︎ focus()とfocusin()の違い

ハルトさん

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

さとみさん

お願いします!

focus()とは

focus()とは、各focus要素にイベントを設定するメソッドとなります。

focus()の書き方

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

パラメータ

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

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

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

フォーカスされた時を行うサンプルコードを紹介します。

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

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

sample.html

index.js

出力結果

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

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

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

sample.html

index.js

出力結果

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

さとみさん

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

ハルトさん

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

focus()でフォーカスイベントを発生させる方法

focus()でフォーカスイベントを発生させるにはfocus()メソッドをパラメータなしで使用します。

sample.html

index.js

出力結果

focus()メソッドをパラメータなしで使用することで、テキストフィールドやテキストエリアをフォーカスすることができます。
その為、各ボタンを押すと各テキストフィールドと各テキストエリアがフォーカスされます。

focus()とfocusin()の違い

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

sample.html

style.css

index.js

出力結果

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

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

今回のポイント

focus()でフォーカスされた時に処理

⚫︎ 要素をフォーカスした時に処理を行うにはjQueryのfocus()メソッドを使用する

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

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

⚫︎ focus()で要素をフォーカスするにはfocus()をパラメータ無しで使用する

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

Writer
壷井

壷井

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

最新の案件情報

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