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

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

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

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

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

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

このページの目次

１．自動で input にフォーカスを当てる方法
- 【要注意】ちなみに focusin だとフォーカスが当たらない
２．自動で input からフォーカスを外す方法
- 【要注意】focusout ではフォーカスは外れない！
自動フォーカス当てたり外したりの方法まとめ

１．自動で 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例

<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>

<br>

</form>

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

$(function(){
  /// DOM読み込み後に自動フォーカスイン
  $('#user-name').focus();
});

$(function(){

/// DOM読み込み後に自動フォーカスイン

$('#user-name').focus();

});

たったこれだけのこと。

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

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

$(function(){
  /// DOM読み込み後に自動フォーカスイン
  $('#user-name').trigger('focus');
});

$(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例

<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>

<br>

</form>

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

$(function(){
  $('#user-name').one('focusin', function(){
    $(this).blur();
  });
});

$(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(); を使わないとダメ！