More than 3 years have passed since last update.

jQueryを使ってテキストボックスにフォーカスを当てる方法

Posted at 2020-10-22

以前に私が書いた要素の表示、非表示のコードをそのまま使っていきます。
まだ見ていない方はこちらからご覧ください。
https://qiita.com/pikarunn/items/ce8dc83d5baa4ce5fd60

要素を表示した時にフォーカスが当たり、カーソルを当てなくても文字を打てるようになります

以前に使ったコードはこちらです

header.script


$("#input").toggle();

$("#button").click(function() {
    $("#input").toggle();
});

header.html

<button id="button">表示 非表示ボタン</button>
<input id="input" placeholder="表示させたい要素">

このコードに一行足すだけでテキストボックスにフォーカスを当てることができます


$("#input").focus();

.focusを("#input")につけることで、テキストボックスが表示されたと同時にフォーカスも当たるようになり、カーソルを当てなくても、文字を打てるようになります。

まとめ

以上で実装完了です。
このようなフォーカスを当てる機能は項目を入力する際などに使うと便利です。
また、フォーカスを当てることでユーザーの手間を省くことができます。
このような時に便利なので是非実装してみてください！