jQueryで自動フォーカスを当てたり外す方法&コード例

やり方が分からなくて苦労したので。

たとえばフォームとか作るとき・・・

  • 自動で input にフォーカスを当てたい
  • 逆に自動でフォーカスを外したい
  • 特定のタイミングで自動フォーカス

みたいなやり方が良く分からなかったです。

また落とし穴も多かったので、
ここでは jQuery から input に自動フォーカスさせる方法 まとめました。

1.自動で input にフォーカスを当てる方法

最初は自動でフォーカスを当てる方法について。

これには必ず focus メソッドを使わないとダメ

それ以外を使うと、無意味なコードになるので注意です。

 

ではまず focusメソッドが何かについて。

▼ このメソッドについてのMDN説明引用

This method is a shortcut for .on( "focus", handler ) in the first and second variations, and .trigger( "focus" ) in the third.

引用元 : https://api.jquery.com/focus/#focus-handler

▼ 上の説明を補足付きで意訳したもの

このメソッドは focus(handler) みたいに呼ぶと .on( "focus", handler ) のショートカット、もし引数なしで focus() みたいに呼ぶと .trigger('focus') の代わりにできます。

文字通りフォーカスイベントを監視できる関数

引数なし focus()  だと要素にフォーカスを当てる機能もあります。

この事実を知らず、フォーカスの当て方に苦戦しました。

 

たとえば次、名前の入力欄に 自動フォーカスを当てるコード

▼ 超適当なフォームのHTML例

▼ この名前欄に自動フォーカスさせるjQueryコード

たったこれだけのこと。

なんで数時間も悩んでたのか良く分からない・・・

 

ちなみに次みたいに trigger('focus')  してもOKです。

まあフォーカスを当てるだけなら、どっちでも問題ありません。

【要注意】ちなみに focusin だとフォーカスが当たらない

ちなみに focus に似た紛らわしいメソッドもあります。

それが focusin というメソッド

名前のせいで「フォーカス当てる系のやつ?」みたいな勘違いしてました。

 

でも実は・・そんな役割は一切ありません。

▼ 公式リファレンスでの focusin の説明引用

This method is a shortcut for .on( "focusin", handler ) in the first two variations, and .trigger( "focusin" ) in the third.

引用元 : https://api.jquery.com/focusin/#focusin-handler

確かに trigger('focusin')  の代わりにもできるみたいです。

でも focusin  をトリガーしてもフォーカスは当たらないんですよね。

意外な落とし穴なので、皆さんもハマらないよう気を付けてください。

2.自動で input からフォーカスを外す方法

お次は入力欄から自動でフォーカスを外すやり方

その場合は blur メソッドを使えばOK

まあ自動でフォーカスを外す場面はメッタにないですが・・・

でも次の場面だと必要になります。

  • 意図せずフォーカスインする場合
  • 特定条件でフォーカスを外したい場合

 

では例のごとく、blurメソッドが何なのかについて。

▼ 公式での blur メソッドの解説

This method is a shortcut for .on( "blur", handler ) in the first two variations, and .trigger( "blur" ) in the third.

引用元 : https://api.jquery.com/blur/#blur-handler

▼ この説明の補足付きの意訳

このメソッドは blur( handler) みたいに呼ぶと .on( "blur", handler ) の代わりになるし、引数を渡さず blur() で実行すると .trigger( "blur" ) と同じ役割みたいになります。

まあさっきの focus の説明とあんまり変わりません。

引数を渡さないと .trigger("blur")  の代わりになるのがポイントです。

 

使い方は例えば次のような感じ。

最初に focusin  したら自動でフォーカスを外すコードです。

▼ 適当に作ったフォームHTML例

▼ focusin 後に自動でフォーカスを外すコード

実際にフォームを作って動かしてみると、名前欄をクリックしたら "なぜか最初の一回だけフォーカスが当たらない" という謎仕様の入力欄ができあがります。

興味のある人は作成してみてください。

【要注意】focusout ではフォーカスは外れない!

蛇足だけどフォーカスを外すときの注意点。

それは focusout ではフォーカスは外れないこと

名前のせいで「フォーカス外す系のアレ?」と勘違いしてました。

 

でも実は・・・そんな役割は一切ありません(2回目)

▼ 公式での focusout の説明引用

This method is a shortcut for .on( "focusout", handler ) when passed arguments, and .trigger( "focusout" ) when no arguments are passed.

引用元 : https://api.jquery.com/focusout/#focusout-handler

確かに .trigger( "focusout" )  の代わりになると書いてあります。

でも先ほどの focusin 同様、フォーカス操作は一切できません。

だから xxx.focusout();  とかしても無意味です。

かならず xxx.blur();  を使わないとダメ!

自動フォーカス当てたり外したりの方法まとめ

ということで簡単にまとめ。

以上、jQueryで自動フォーカスする方法でした。ではまた($・・)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください