###jQueryを使ってテキストボックスにフォーカスを当てる方法を見ていきましょう
以前に私が書いた要素の表示、非表示のコードをそのまま使っていきます。
まだ見ていない方はこちらからご覧ください。
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")
につけることで、テキストボックスが表示されたと同時にフォーカスも当たるようになり、カーソルを当てなくても、文字を打てるようになります。
#まとめ
以上で実装完了です。
このようなフォーカスを当てる機能は項目を入力する際などに使うと便利です。
また、フォーカスを当てることでユーザーの手間を省くことができます。
このような時に便利なので是非実装してみてください!