0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

###jQueryを使ってテキストボックスにフォーカスを当てる方法を見ていきましょう

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

###完成形はこちらです
要素を表示した時にフォーカスが当たり、カーソルを当てなくても文字を打てるようになります

image.png

image.png

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

header.script

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

$("#button").click(function() {
    $("#input").toggle();
});
header.html
<button id="button">表示 非表示ボタン</button>
<input id="input" placeholder="表示させたい要素">

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


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

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

image.png

image.png

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?