L'objectif de ce cas pratique est de créer un champs qui permet à l'utilisateur de rentrer un code composé de plusieurs numéro. Ce type de champs est souvent utilisé dans le cas de système d'authentification à 2 facteurs. Vous pouvez retrouver le code source pour débuter sur Github
Sommaire
00:00 Énoncé
03:20 Structure HTML
08:58 Style CSS
11:50 Construire la structure en JavaScript
15:30 Limiter la valeur du champs
22:14 Focaliser le champs suivant
24:21 Gestion du retour
27:35 Gestion de la valeur
33:50 Gestion du copié / collé
Énoncé
Le client exige que plusieurs comportements soient présent pour considérer le composant comme valide (des tests sont disponibles pour confirmer ces comportements)
- L'interface doit correspondre au plus proche à celle de la capture
- Quand on tape un nombre dans un champ, le champ suivant doit se sélectionner
- On ne peut pas taper un caractère qui ne soit pas un chiffre
- On doit pouvoir coller un nombre
- On doit générer un champ caché qui a la valeur qui correspond à ce que voit l'utilisateur.
Après une discussion avec l'équipe, vous convenez de la piste à adopter, un composant web qui permettra de réutiliser cet élément d'interface à plusieurs endroits.
<code-input
name="code"
size="6"
value="123456"
legend="Entrer le code à 6 chiffres généré par votre application"
/>Si l'attribut "value" change, il faut que l'interface reflète ce changement.
A vous de jouer !
