Padding interne à un input text pour carte bancaire ou téléphone

Bopnjour,

Sur différents sites d'e-commerce, il m'arrive de voir des champs de faisie de carte bancaire ou téléphone qui ajoutent à la volée du padding entre caractères à la volée.

Sur un champ de carte bancaire, les chiffres sont séparés en séries de 4.

L'attribut autocomplete permet de restreindre dans certains cas les valeurs saisies mais je ne comprend pas comment effectuer ce type d'opération à la volée.

Possible erreur de forum d'ailleurs, c'est certainement du Javascript.

C’est certainement du JavaScript en effet. Il y a tout un tas de manière de le faire, mais je pense que le point commun c’est de surveiller la saisie au clavier avec l’évènement keypress, et de modifier la value du champ. On peut aussi utiliser une structure HTML complexe, par exemple plusieurs inputs qui sont déguisés via CSS pour faire croire qu’il n’y a qu’un seul champ, et utiliser la méthode select() ou focus() pour passer de l’un à l’autre.