[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

[For super beginners] How to use autofocus: true
How to use GitHub for super beginners (team development)
[Ruby] How to use slice for beginners
How to use binding.pry for view files
[For beginners] How to debug in Eclipse
How to use Swift's Codable Super personal memo
How to use Map
How to use rbenv
How to use letter_opener_web
How to use with_option
How to use fields_for
How to use java.util.logging
How to use map
How to use an array for HashMap keys
How to use collection_select
Note how to use Swift super basic TableView
[For beginners] How to implement the delete function
How to use active_hash! !!
How to use MapStruct
How to use hidden_field_tag
How to use TreeSet
[How to use label]
How to use identity
(For beginners) [Rails] Time saving tech! How to install and use slim
How to use JUnit 5
[Rails] How to use Gem'rails-i18n' for Japanese support
[For Rails beginners] Summary of how to use RSpec (get an overview)
How to use Dozer.mapper
How to use Gradle
How to use org.immutables
How to use java.util.stream.Collector
How to use VisualVM
How to use Map
How to use an array for a TreeMap key
[For beginners] How to operate Stream API after Java 8
[Spring Boot] How to create a project (for beginners)
How to use Truth (assertion library for Java / Android)
[For those who create portfolios] How to use font-awesome-rails
[Java] How to use Map
How to use Chain API
[Java] How to use Map
How to use Priority Queuing
[Rails] How to use enum
How to use java Optional
How to use JUnit (beginner)
How to use Ruby return
[Rails] How to use enum
How to use @Builder (Lombok)
[Swift] How to use UserDefaults
How to use Swift UIScrollView
[For super beginners] DBUnit super introduction
How to use Big Decimal
[Java] How to use Optional ②
[Java] How to use removeAll ()
How to use String [] args
[Java] How to use string.format
How to use Java Map
[For super beginners] Ant super introduction
Ruby: How to use cookies
How to use dependent :: destroy
How to use Eclipse Debug_Shell