[RAILS] [Pour les super débutants] Comment utiliser l'autofocus: vrai

attribut autofocus

"Autofocus: vrai" signifie que dès que la page est chargée, le curseur se déplace vers la partie où l'attribut autofocus est décrit et l'état d'entrée est entré.

Exemple concret

Lorsque vous passez de la page de liste à Ma page et essayez de modifier le nom. 　 Si vous cliquez sur le bouton Ma page dans la page de liste pour accéder à Ma page, Ma page sera affichée avec le curseur déplacé même si vous ne sélectionnez pas la partie du formulaire de votre nom. Vous pouvez donc le modifier tout de suite!

⚠️ Gardez à l'esprit que l'autofocus: true est limité à un par fichier html.

Comment écrire

Ici, le code de l'image ci-dessus est introduit tel quel. Comprenons comment "autofocus: ture" est utilisé dans l'ensemble. Environnement: 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>Ma page</h1>
  </div>
  <div class="account-info">
    <h2>Informations de l'utilisateur</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 "Mise à jour" %>
      <br>
      <%= link_to "Se déconnecter", destroy_user_session_path, method: :delete%>
    <% end %>
  </div>
</div>

en conclusion

URL du site de référence → Uhyohyoweb Comment était l'article sur "autofocus: comment utiliser true"? L'autofocus en lui-même est très simple, mais si vous ne le savez pas, on vous demandera «qu'est-ce que c'est? C'est trop facile à ramasser, j'ai donc écrit cet article! J'espère que cela vous aide à comprendre même un peu. Veuillez également signaler les points que vous ne souhaitez pas. (Parce que c'est le premier post et un débutant, les suggestions de chacun mèneront à l'apprentissage!) Merci à tous d'avoir regardé jusqu'à la fin. Rendez-vous dans un autre article ~~!