Last-Modified: 2022/07/16

jQueryで要素にフォーカスを当てる方法と外す方法【現役エンジニアが解説】

今回は、jQueryで要素にフォーカスを当てる方法と外す方法について、簡単に解説していきます。

フォーカスを当てる

jQueryではフォーカスを簡単に当てられます。

対象の要素でfocusメソッドを実行するだけです。

$('#hoge').focus();

上記のコードでは、hogeのidの要素にフォーカスを当てます。

フォーカスを外すことも容易です。

具体的には、対象の要素でblurメソッドを呼びます。

$('#hoge').blur();

上記の例では、hogeというidを持つ要素からフォーカスを外します。

フォーカスはtriggerメソッドでも操作できます。

$('#hoge').trigger('focus');

上記のように、対象要素にfocusイベントを起こすことでフォーカスを当てられます。

$('#hoge').trigger('blur');

また、上記のコードの例のように、blurイベントも同様に起こすことによって、フォーカスを外せます。