[Ruby On Rails / HTML] How to display the cursor (caret) at an appropriate place when displaying a web page
It is a memorandum.
What are cursors and carets?
Caret ≒ cursor The word caret is used when you want to distinguish it from a mouse cursor.
Main subject
Use autofocus to focus the cursor on the right place. In Ruby, write as follows
autofocus: true
Let's take a look at the case where the item "Nickname" is provided on the new registration screen of Devise. First of all, what will be displayed if autofocus is not used for "Nickname"?
① There is no autofocus in "Nickname"
erb:new.html.erb
<h2>Sign up</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="field">
<%= f.label :nickname, "Nickname" %><br />
<%= f.text_field :nickname %>
</div>
<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
(Omitted)
In the above case, when I open the new registration web page, the cursor is focused on Email instead of Nickname.
Next, add autofocus to <% = f.text_field: nickname%> and look at Nickname with the cursor in focus.
② "Nickname" has autofocus
erb:new.html.erb
<h2>Sign up</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="field">
<%= f.label :nickname, "Nickname" %><br />
<%= f.text_field :nickname, autofocus: true %>
</div>
<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
(Omitted)
By giving autofocus to "Nickname" in this way, the place where the cursor is automatically placed first becomes Nickname.
Reference article
https://www.sophia-it.com/content/%E3%82%AD%E3%83%A3%E3%83%AC%E3%83%83%E3%83%88 http://www.htmq.com/html5/input_autofocus.shtml
Recommended Posts