Au-delà des bases : gérer les entrées numériques comme un pro avec ``

Qu'est-ce que

Selon la définition de MDN Docs : des éléments de type numéro sont utilisés pour permettre à l'utilisateur de saisir un numéro. Ils incluent une validation intégrée pour rejeter les entrées non numériques.

Donc, fondamentalement, il s’agit d’une fonctionnalité permettant d’améliorer l’expérience utilisateur sur nos sites Web et applications Web merdiques. Bien qu'il s'agisse d'une fonctionnalité intéressante pour simplifier les saisies numériques, elle présente quelques comportements qui peuvent ne pas être évidents au début, mais dont nous devons être conscients en tant que développeur Web.

Ces comportements sont liés à :

1. Clavier virtuel
2. Notations scientifiques

Clavier virtuel

Un clavier virtuel est un clavier qui apparaît sur votre écran, généralement sur les appareils de saisie tactile comme les téléphones mobiles, les tablettes/iPad et certaines technologies d'assistance.

<input id="numeric-input" type="number" >

Le simple fait d'utiliser le type="number" peut sembler correct au début, mais cela pose un problème lors de l'utilisation d'un clavier virtuel. Cela pourrait ouvrir un clavier complet au lieu d'un clavier numérique, ce qui peut nuire à l'expérience utilisateur et à la précision de la saisie.

`" />

Mode de saisie de la solution

Bien que le problème du clavier virtuel puisse ne pas se produire sur les versions plus récentes du système d'exploitation et du navigateur, c'est toujours une bonne idée d'utiliser l'attribut inputmode car il fait allusion au type de données qui pourraient être saisies par l'utilisateur lors de la modification de l'élément ou de son contenu.
Cela permet aux navigateurs d'afficher un clavier virtuel approprié pour toutes les versions et tous les appareils, améliorant ainsi l'expérience utilisateur globale (UX) de l'application.

inputmode peut avoir plusieurs valeurs, mais pour notre cas d'utilisation avec des entrées numériques, nous devrions utiliser l'une de ces deux valeurs :
1.numérique

<input id="numeric-input" type="number" inputmode="numeric" >

Le numéro de type d'entrée accepte toute valeur rationnelle. Si vous n'acceptez pas de valeurs fractionnaires et n'acceptez que des nombres entiers, l'utilisation d'une valeur numérique doit être privilégiée pour de tels scénarios.

2.décimal

<input id="numeric-input" type="number" inputmode="decimal" >

Si vous acceptez les nombres fractionnaires, utilisez la valeur décimale car elle affichera un clavier virtuel contenant les chiffres et le séparateur décimal pour les paramètres régionaux de l'utilisateur.

Préférez toujours utiliser une valeur décimale dans votre saisie, sauf si vous n'acceptez pas les valeurs fractionnaires.

`" />

Notations scientifiques

Beaucoup d'entre nous ont peut-être oublié ou ne savent pas que e ou E sont des valeurs numériques valides dans les notations scientifiques.

`" />

Oui, e ou E signifie "exposant de dix" en notations scientifiques, et est utilisé pour représenter des valeurs très grandes ou petites. par exemple

1e5 = 100000 
     or 
1e-5 = 0.00001

Le numéro de type d'entrée HTML a été conçu dans un souci de flexibilité et prend en charge cette notation scientifique, permettant la saisie d'exposants (par exemple, 1e5). Bien que cela ne soit pas un problème en soi et puisse être utile dans certains contextes, cela peut devenir problématique lorsque la saisie ne doit être composée que de nombres de base.

Il existe deux façons de limiter la saisie aux seuls chiffres et de ne pas autoriser les notations scientifiques.

1. Vous utilisez Regex ? motif.
2. En utilisant Javascript (ma méthode préférée).

Prévenir le comportement par défaut à l'aide de Javascript

Dans la plupart des scénarios, je ne souhaite pas que les utilisateurs saisissent les notations « e » ou « E », car elles ne sont pas nécessaires, et les autoriser peut entraîner des problèmes inattendus.

Il existe de nombreuses façons d'y parvenir, mais ma méthode préférée est d'empêcher l'enregistrement de la clé « e » ou « E ». Nous pouvons y parvenir en utilisant l'événement keydown et PreventDefault.

 element.addEventListener("keydown", (e) => {
    if (["e", "E"].includes(e.key)) {
      // you can also add "+" and "-" if you want to prevent them from being registered.
      e.preventDefault();
    }
  });

J'aime particulièrement cette méthode pour trois raisons :

• Il fournit un message clair à toute personne lisant notre code plus tard que nous ne voulons pas enregistrer les clés e ou E.
• Cela permet également une meilleure UX car au lieu de changer les valeurs, nous n'enregistrons pas la clé elle-même.
• Le type d'événement keydown est KeyboardEvent qui nous donne un accès direct aux valeurs clés améliorant le DX global de la solution.

Toutes les entrées numériques ne doivent pas nécessairement être des numéros de type d'entrée

Parfois, nous pouvons instinctivement rechercher un numéro de type d'entrée si nous voyons une exigence de saisie qui accepte la saisie numérique, mais parfois, le numéro de type d'entrée n'est pas la bonne solution pour de tels scénarios.

Quelques exemples de tels scénarios sont :

• Carte de crédit/carte de débit : Lorsque nous avons un champ de saisie pour la carte de crédit/débit, au lieu d'utiliser un numéro de type de saisie, il est préférable d'utiliser un texte de type de saisie avec un mode de saisie numérique et validation en utilisant votre méthode préférée, car une carte de crédit peut avoir des valeurs nulles non significatives et certains navigateurs peuvent ne pas le permettre, nous pourrions également souhaiter ajouter des validations spécifiques à la carte ou autoriser un espacement entre un groupe de quatre chiffres (tels qu'ils sont imprimés sur la carte). ).

• Code Postal : Bien que la plupart des pays aient des codes postaux numériques, certains pays comme le Canada pourraient avoir des codes alphanumériques, il est important d'utiliser des solutions selon votre besoin, cela peut être de type saisie numérique ou saisissez du texte.

• Numéros de mobile : Vous devez toujours utiliser le type d'entrée input="tel" avec un modèle d'expression régulière adapté à votre cas d'utilisation.

Conclusion

Étant donné que le HTML moderne fournit des utilitaires vraiment intéressants, certaines choses peuvent sembler très triviales à implémenter, comme le numéro de type d'entrée, mais en tant que développeurs, nous devons toujours prêter attention à ces utilitaires et à la manière dont nous pouvons les utiliser pour créer des expériences utilisateur encore meilleures.

Si vous avez aimé cet article, laissez une réaction et si vous n'avez pas aimé quelque chose, vous pouvez laisser vos commentaires dans les commentaires.

J'aime me connecter et parler avec les gens de la technologie et des événements qui l'entourent. Vous pouvez me contacter sur Twitter/X et LinkedIn.

Vous pouvez également me suivre sur Dev.to pour recevoir une notification chaque fois que je publie un nouvel article.

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!