対象者
- 投稿フォームを作ろうとしている方
- クリックしなくても自動で入力待機状態を作りたい方
目的
- autofocus属性を使って、自動でカーソルをあわせられるようにする！
実際の手順と実例
1.autofocus属性とは？？
- autofocus:trueでページを読み込んだ後、クリックすることなく、カーソルが移動して入力待機状態を作るというメソッド(?)です。
2.具体例
本の投稿をするアプリを例とします。
入力は下記の通り
app/views/devise/registrations/new.html.erb
<h2>Sign up</h2>
<%= form_with model: @user, url: user_registration_path, id: 'new_user', class: 'new_user', local: true do |f| %>
<div class="field">
<label for="user_name">Name</label><br>
<%= f.text_field :name, autofocus: true, autocomplete: "name" %>
</div>
<div class="field">
<label for="user_email">Email</label><br>
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
:
:
<% end %>
画像だと少しわかりにくいですが
上記のように入力するとページ開いたとき
対象のフォームにカーソルが合います。
3.autocompleteとは、、、？
補足で**autocomplete： "カラム名"**とは自動で入力補助をしてくれる機能です。
途中まで文字を入力すると
「もしかして、、これ打ちたいの？？？」って自動で提案してくれます。
参照
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 オートコンプリート (AutoComplete)
属性 : autofocus (オートフォーカス属性) の解説
投稿者コメント
タイトルはrailsですがHTMLでもあるので悩みました笑
たまに見かけるこれなんだろうと思って調べたらすごく便利そうだったので記事にしてみました。
PFにどんどん実装していこうかなと思います。
My Profile
プログラミング学習歴３ヶ月目のアカウントです！
プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。
また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。
もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。