[For super beginners] How to use autofocus: true
autofocus attribute
"Autofocus: true" means that as soon as the page is loaded, the cursor moves to the part where the autofocus attribute is described and the input state is entered.
Concrete example
When you move from the list page to My Page and try to change the name.
If you click the My Page button from the list page to go to My Page, My Page will be displayed with the cursor moved even if you do not select the form part of your name. So you can edit it right away!
⚠️ Keep in mind that autofocus: true is limited to one per html file.
How to write
Here, the code of the above image is introduced as it is. Let's understand how "autofocus: ture" is used in the whole. Environment: rails 6.0.0, VScode 1.46, macOS Catalina 10.15
app/views/users/show.html.erb
<div class="account-page">
<div class="account-page-title">
<h1>My page</h1>
</div>
<div class="account-info">
<h2>User information</h2>
</div>
<div class="account-page-form">
<%= form_for(current_user) do |f| %>
<div class="form-field">
<div class="form-field-name">
<%= f.label :name %>
</div>
<div class="form-field-name">
<%= f.text_field :name, autofocus: true %>
</div>
</div>
<div class="form-field">
<div class="form-field-email">
<%= f.label :email %>
</div>
<div class="form-field-email">
<%= f.email_field :email %>
</div>
<br>
</div>
<%= f.submit "Update" %>
<br>
<%= link_to "Logout", destroy_user_session_path, method: :delete%>
<% end %>
</div>
</div>
in conclusion
Reference site URL → Uhyohyoweb How was the article about "autofocus: how to use true"? Autofocus itself is very easy, but if you don't know it, you'll be asked "what's that?" It's too easy to pick up, so I wrote this article! I hope it helps you to understand even a little. Also, please point out any points that you do not want. (Because it is the first post and a beginner, everyone's suggestions will lead to learning!) Thank you everyone for watching until the end. See you in another article ~~!
Recommended Posts