ENTERKEYHINT

J'ai tout récemment appris que l'attribut ENTERKEYHINT sur les entrées de formulaire était une chose! Cela me semble être un gros problème, car la création de balisage de forme HTML est une tranche décente de la vie d'un développeur frontal, et cet attribut pourrait ( devrait? ) Il est utilisé sur presque toutes les entrées.

L'attribut ENTERKEYHINT modifie la clé d'action sur un clavier mobile pour modifier le texte / les offres. Stefan Judis le dit bien dans ce tweet de 2020:

Alors, dis que j'ai une forme comme ceci:

 <formulaire>
    Nom:
    <input type="text" name="name">
   label>
  
    Chansons préférées:
    <textarea name="Songs">  TextArea>
   label>
  <button> Enregistrer 
 form></button></textarea></formulaire>

L'expérience utilisateur là-bas suggère une forme qui «enregistre» mais par défaut sur l'iPhone dans ma main, le bouton bleu du clavier dit… «Allez».

Ce n'est pas une catastrophe ou quoi que ce soit, mais maintenant j'ai des options pour ce bouton. Je vais voler cela à la spécification, qui les appelle des «modalités d'entrée»:

En tant que professionnel du Web sérieux, j'ai également essayé enterkeykint = "caca" mais, hélas, il n'a pas été respecté par le navigateur. Notez que sur Android, le bouton Action ne se transforme pas toujours en texte, mais utilise des icônes. Donc, pour la valeur envoyée, vous obtenez une petite icône d'avion en papier plutôt que l'étiquette «envoyer». Alors, oui, évidemment, le caca aurait dû se transformer en ?.

Pour l'exemple de petit formulaire ci-dessus… la valeur entre ou fait en quelque sorte mieux pour moi que d'aller. Si je veux changer cela, j'ajouterais l'attribut pour tous les éléments de forme interactifs:

 <formulaire>
    Nom:
    <input type="text" name="name" enterkeyhint="Done">
   label>
  
    Chansons préférées:
    <textarea name="Songs" enterkeyhint="Done">  TextArea>
   label>
  <button entr> Enregistrer 
 form></button></textarea></formulaire>

Cet attribut va directement sur les entrées de formulaire, il semble donc un peu répétitif l'écrivant pour chaque entrée, en particulier sous des formes plus longues. Mais cela vous donne l'occasion de le modifier en fonction de l'entrée ciblée.

Je remarque que Save n'est pas une option valide. Cela semble bizarre car cela ressemble à ce que beaucoup de formes offriraient. Peut-être que la plate-forme Web ne veut pas offrir quelque chose qui indique aux utilisateurs quelque chose qu'ils ne peuvent pas appliquer? Je ne suis pas sûr que ce soit le cas, cependant, parce que si vous mettez le prochain ou le précédent, cela ne change pas du tout le comportement, vous devrez coder cela vous- même si ce que vous voulez faire est de déplacer la mise au point vers les entrées suivantes ou précédentes. Par défaut, le bouton d'action soumet juste le formulaire comme il le ferait normalement.

Je suis tombé sur tout cela alors que Stefan a récemment tweeté que Firefox le soutient maintenant, offrant un ensemble de support largement complet pour cette fonctionnalité. Cette fonctionnalité n'est pertinente que pour les navigateurs mobiles (ou, je suppose, les navigateurs qui prennent en charge les claviers virtuels?) Il m'a donc fait penser à ce que Firefox Mobile existe. Je suis tellement habitué au fait que tous les navigateurs sont Safari sur iOS (?). Mais sur Android, vous pouvez utiliser "Real" Firefox, ce qui est un bon rappel qu'il existe non seulement des navigateurs mobiles différents, mais que différents navigateurs mobiles ont également un comportement différent.

Dans cette vidéo, qui, je suis sûr, antérieure à la prise en charge de EnterKeyHint, notez comment le clavier virtuel offre l'interface utilisateur pour le prochain automatiquement lorsqu'il est concentré sur la première entrée (et aucun moyen de se soumettre directement), mais sur le second (et dernier) l'action, le bouton se transforme en bouton de soumission (et il n'y a pas de bouton "précédent"). Ceci est nettement différent d'iOS où tout ce qui est offert est de la navigation entre les entrées avec peu de flèches de haut en bas qui se trouvent au-dessus du clavier lui-même.

Dans l'ensemble, une fonctionnalité assez cool dont nous devons tous au moins être consciente, sinon d'utiliser, sur la plupart des formulaires HTML que nous créons pour correspondre aux comportements.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!