Bonjour, Habr! Je vous présente la traduction de l'article
«Tout ce que vous avez toujours voulu savoir sur le mode d'entrée» de Christian Oliff.
Note du traducteur: Le titre original de l'article «Tout ce que vous avez toujours voulu savoir sur le mode d'entrée» a été remplacé par «Caractéristiques de l'attribut mode d'entrée pour le système d'exploitation mobile et les navigateurs», car le second transmet plus précisément l'essence.
L'attribut global inputmode indique aux navigateurs pour les appareils avec un clavier à l'écran quelle option afficher lorsque l'utilisateur sélectionne un élément d'entrée ou de zone de texte.
<input type="text" inputmode="" /> <textarea inputmode="" />
Contrairement à la modification du type du formulaire, le mode d'entrée ne modifie pas la façon dont le navigateur interprète les entrées - il donne au navigateur des instructions sur le clavier à afficher.
L'attribut inputmode a une longue histoire, mais ce n'est que récemment qu'il a été adopté par les principaux navigateurs mobiles: Safari pour iOS et Chrome pour Android. Auparavant, il était implémenté dans Firefox pour Android en 2012, mais plus tard, après quelques mois, il a été supprimé (bien qu'il soit toujours disponible via le drapeau). Après presque six ans, Chrome pour Android a construit cette propriété, et avec la dernière version d'iOS 12.2, Safari la prend également en charge.
La prise en charge des attributs du navigateur peut être consultée
ici . Les chiffres indiquent la version du navigateur.
Avant d'entrer dans les détails, nous devons garder à l'esprit que le standard de vie WHATWG fournit une documentation sur le mode d'entrée, tandis que la spécification W3C 5.2 ne la contient plus. Étant donné que le WHATWG documente l'attribut et que les navigateurs travaillent sur sa prise en charge, nous considérerons les caractéristiques techniques du WHATWG comme une norme.
Le mode d'entrée prend plusieurs valeurs. Regardons-les un à la fois.
#Aucun
<input type="text" inputmode="none" />
Commençons par cela, car peut-être que nous n'avons pas besoin de clavier. L'utilisation de inputmode = "none" n'affichera pas le clavier dans Chrome pour Android. iOS 12.2 affichera son clavier alphanumérique par défaut, donc la caractéristique aucune dans ce cas pourrait être pour iOS quelque chose comme une réinitialisation.
#Numérique
<input type="text" inputmode="numeric" />
C'est peut-être l'une des valeurs de mode d'entrée les plus courantes, car elle est idéale pour les champs de saisie qui ne nécessitent que des chiffres - par exemple, codes PIN, codes postaux, numéros de carte de crédit, etc. L'utilisation de numérique avec type = "texte" peut être plus logique que de basculer l'entrée vers type = "nombre" car inputmode = "numérique" peut être utilisé avec les attributs maxlength, minlength et pattern, ce qui le rend plus polyvalent pour différentes occasions.
J'ai souvent vu des sites utilisant type = "tel" en langue étrangère pour afficher un pavé numérique. Ceci est considéré comme une solution de contournement, mais est sémantiquement incorrect.
N'oubliez pas que le mode d'entrée prend en charge l'attribut pattern, nous pouvons ajouter pattern = ”\ d *” pour entrer pour le même effet. Utilisez-le si vous êtes sûr que l'entrée ne doit permettre que la saisie de chiffres, car Android (contrairement à iOS) ne permet pas à l'utilisateur d'accéder au clavier avec des lettres, ce qui pourrait gêner accidentellement la saisie de données valides.
#Tél
<input type="text" inputmode="tel" />
La saisie d'un numéro de téléphone à l'aide du clavier alphanumérique standard peut être difficile. Sur le clavier du téléphone, chaque bouton avec un chiffre (sauf 1 et 0) représente trois lettres (par exemple, 2 représente A, B et C) qui se trouvent sur la même touche. Le clavier alphanumérique ne fait pas référence à ces lettres, donc le décodage d'un numéro de téléphone contenant des lettres (par exemple, 1-800-COLLECT) nécessite des ressources supplémentaires.
L'utilisation du mode d'entrée avec le passage au tel affiche un clavier téléphonique standard, y compris des boutons pour les chiffres de 0 à 9, les signes dièse et les astérisques. De plus, nous aurons des caractères mnémoniques alphabétiques (par exemple, ABC).
#Décimal
<input type="text" inputmode="decimal" />
Le champ du mode d'entrée avec le passage à la décimale entraîne de petites modifications pour iOS, où le clavier ressemble à celui du tel, mais les signes + * # sont remplacés par une virgule décimale. Android utilisera simplement le pavé numérique.
#Email
<input type="text" inputmode="email" />
Je suis sûr que vous avez rempli un formulaire nécessitant l'introduction d'une adresse e-mail, ce qui a obligé le clavier à basculer uniquement pour accéder au symbole @. Ce n'est pas fatal, mais certainement pas trop pratique. C'est là que la valeur de l'e-mail est utile. Il ajoute le symbole @ et le point décimal.
Un tel clavier peut être utile pour ceux qui ont besoin d'entrer un nom d'utilisateur sur Twitter, car @ est le personnage principal pour identifier les utilisateurs de ce réseau social. Une autre raison d'utilisation peut être si vous avez votre propre script pour vérifier les e-mails et que vous ne souhaitez pas utiliser la fonction de validation intégrée au navigateur.
#URL
<input type="text" inputmode="url" />
Une valeur d'URL facilite l'ajout d'une extension de nom de domaine (par exemple, .com) en appuyant sur un seul bouton; il existe également des boutons couramment utilisés pour les adresses Web, par exemple les caractères (.) et (/). L'extension indiquée sur le clavier est ajoutée à l'entrée utilisateur.
Un tel clavier peut être utile pour montrer aux utilisateurs que votre champ de saisie accepte les noms de domaine (site.com) ainsi que les adresses de domaine complètes (https://site.com).
Utilisez type = ”url” si votre champ de saisie nécessite la validation des caractères saisis.
#Rechercher
<input type="text" inputmode="search" />
Cette valeur affiche le bouton bleu Go sur iOS et le bouton vert Enter sur Android, tous deux à la place de Return. Comme vous l'avez peut-être deviné par le nom, la recherche est utilisée pour les formulaires de recherche, fournissant une clé pour produire une requête.
Si vous souhaitez afficher la recherche au lieu de la saisie dans iOS et l'icône de la loupe sur Android au lieu de la flèche verte, utilisez type = "recherche".
# Que devez-vous savoir d'autre
- Les navigateurs à base de chrome sur Android, tels que Microsoft Edge, Brave et Opera, ont le même comportement de mode d'entrée que Chrome.
- Je n'ai pas touché les claviers de l'iPad pour des raisons de brièveté. Ils sont similaires à l'iPhone, n'incluent que plus de boutons. Il en va de même pour les tablettes Android, à l'exception des claviers tiers, qui peuvent être un sujet distinct qui mérite d'être souligné.
- Initialement, la spécification proposée avait des significations kana et katakana pour l'entrée japonaise, mais elles n'ont jamais été implémentées dans aucun navigateur et ont donc été abandonnées.
- Le nom latin était également à l'origine l'une des valeurs du mode d'entrée et a été supprimé. Fait intéressant, si vous l'utilisez maintenant dans iOS Safari, il affichera le nom d'utilisateur au-dessus du clavier.