비망록입니다.

커서와 캐럿이란?

캐럿≒ 커서
마우스 커서 등과 구별하고 싶은 경우에 caret라고 하는 말이 이용됩니다.

주제

커서를 적절한 위치에 초점을 맞추려면 autofocus를 사용하십시오.
Ruby에서는 다음과 같이 작성하는 방법

autofocus: true

그러면 Devise의 신규 등록 화면에 "Nickname"이라는 항목을 마련한 경우를 살펴보겠습니다.
우선 "Nickname"에 autofocus를 사용하지 않는 경우 어떻게 표시됩니까?

①"Nickname"에 autofocus 없음

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>

（後略）

위의 경우 신규 등록 웹페이지를 열어보면 Nickname이 아닌 Email에 커서가 포커스 되고 있습니다.

다음으로, <%= f.text_field :nickname %>에 autofocus를 부여해, Nickname에 커서의 초점을 맞춘 상태로 봅니다.

②"Nickname"에 autofocus 있음

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>

（後略）

이와 같이 autofocus를 "Nickname"에 부여해 주는 것으로, 자동적으로 제일 먼저 커서가 닿는 장소가 Nickname이 되었습니다.

참고 기사

htps //w w. 그 p 히아이 t. 코 m/콘텐 t/%에 3% 82% 에 D% 에 3% 83% 에 3% 에 3% 83% 에 C% 에 3% 83% 83% 에 3% 83% 88
h tp // w w. htmq. 이 m/html5/인프 t_아우토후쿠쿠 s. shtml