やり方が分からなくて苦労したので。
たとえばフォームとか作るとき・・・
- 自動で input にフォーカスを当てたい
- 逆に自動でフォーカスを外したい
- 特定のタイミングで自動フォーカス
みたいなやり方が良く分からなかったです。
また落とし穴も多かったので、
ここでは jQuery から input に自動フォーカスさせる方法 まとめました。
このページの目次
１．自動で 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例
|
1 2 3 4 5 6 7 |
<form name="form"> <label for="user-name">お名前 : </label> <input type="text" id="user-name" /> <br> <label for="user-email">メルアド : </label> <input type="email" id="user-email" /> </form> |
▼ この名前欄に自動フォーカスさせるjQueryコード
|
1 2 3 4 |
$(function(){ /// DOM読み込み後に自動フォーカスイン $('#user-name').focus(); }); |
たったこれだけのこと。
なんで数時間も悩んでたのか良く分からない・・・
ちなみに次みたいに trigger('focus') してもOKです。
|
1 2 3 4 |
$(function(){ /// DOM読み込み後に自動フォーカスイン $('#user-name').trigger('focus'); }); |
まあフォーカスを当てるだけなら、どっちでも問題ありません。
【要注意】ちなみに 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 をトリガーしてもフォーカスは当たらないんですよね。
意外な落とし穴なので、皆さんもハマらないよう気を付けてください。
２．自動で 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例
|
1 2 3 4 5 6 7 |
<form name="form"> <label for="user-name">お名前 : </label> <input type="text" id="user-name" /> <br> <label for="user-email">メルアド : </label> <input type="email" id="user-email" /> </form> |
▼ focusin 後に自動でフォーカスを外すコード
|
1 2 3 4 5 |
$(function(){ $('#user-name').one('focusin', function(){ $(this).blur(); }); }); |
実際にフォームを作って動かしてみると、名前欄をクリックしたら "なぜか最初の一回だけフォーカスが当たらない" という謎仕様の入力欄ができあがります。
興味のある人は作成してみてください。
【要注意】focusout ではフォーカスは外れない！
蛇足だけどフォーカスを外すときの注意点。
それは focusout ではフォーカスは外れないこと
名前のせいで「フォーカス外す系のアレ？」と勘違いしてました。
でも実は・・・そんな役割は一切ありません（２回目）
▼ 公式での 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(); を使わないとダメ！
自動フォーカス当てたり外したりの方法まとめ
ということで簡単にまとめ。
- 自動フォーカスを当てる
必ず focus あるいは trigger('focus') を使う。似た名前の focusin は効かない
- 自動フォーカスを外す
必ず blur あるいは trigger('blur') を使う。紛らわしいけど focusout は効かない
以上、jQueryで自動フォーカスする方法でした。ではまた($・・)/~~~
