Le champ OTP ressemble à une rangée de cases, mais c’est en réalité un seul <input> natif. La saisie automatique par SMS (autocomplete="one-time-code"), le collage, les gestionnaires de mots de passe, les formulaires et les lecteurs d’écran y voient tous un champ de texte ordinaire.
Les codes collés sont nettoyés : « 123-456 » et « 123 456 » fonctionnent tous deux, et les caractères que le motif n’autorise pas sont refusés. Sur Android, webOtp remplit le code depuis le SMS dès qu’il arrive.
Vérification
(completed) se déclenche quand la dernière case est remplie. Définissez aria-invalid sur le champ pour refuser un code : les cases deviennent rouges et tremblent.
Try 123456, or anything else.
Lettres, groupes et masquage
pattern="alphanumeric" accepte aussi les lettres, [groups] ajoute des séparateurs et masked affiche des points.