Limiter le nombre de caractère a saisir dans un input

Version imprimable

12/06/2014, 10h06
clairetj

Limiter le nombre de caractère a saisir dans un input

Bonjour a toutes et tous

Je suis a la recherche d'un petit renseignement: j'ai créé sur une de mes page web un formulaire. J'ai un élément de ce formulaire que je récupère en 3 parties (trois input text). Je veux mettre un nombre limité de caractères à renseigner et lorsque l'utilisateur à atteint cette limite, je passe à l'input text suivant (un peu lorsque l'on renseigne les numéros de sa carte de crédit lors d'un achat sur le web, on rentre les 4 premiers chiffres dans la première case et une fois les quatre chiffres rentrés, cela passe automatiquement à la case suivante). Avez-vous une idée de la réalisation ?

Cordialement,
12/06/2014, 10h11
Bovino

En tout état de cause, ce n'est pas en HTML que tu peux faire ça... :roll:
Message déplacé.

:faq:
En faisant une recherche, on trouve facilement... :aie:
:arrow: Comment passer automatiquement au champ suivant lorsque la taille maximale du champ en cours est atteinte ?

Ceci dit, c'est un peu bancal comme fonctionnement : que se passera-t-il si quelqu'un fait un copier coller par exemple ?

Bonjour.

:whistle:Ci-dessous : Saisie d'un numéro de carte bancaire, par groupe de 4 digits.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html><head> 
     <script type="text/javascript">
     function modification(X)
          {
     if ( X.value.length == 4 )
          {
          chaine = X.getAttribute('id') ;
          indice = chaine.charAt(6) ;
          indice++ ;
          document.getElementById("groupe" + indice).focus()
          }
          }         
     </script>
</head><body onload="document.getElementById('groupe1').focus()"> 
     <FORM>
          <label>Entrez des groupes de 4 chiffres :</label>
          <br><br>
          <input id="groupe1" type="text" size="4" maxlength="4" onkeyup="modification(this)">
          <input id="groupe2" type="text" size="4" maxlength="4" onkeyup="modification(this)">
          <input id="groupe3" type="text" size="4" maxlength="4" onkeyup="modification(this)">
          <input id="groupe4" type="text" size="4" maxlength="4">
     </FORM>
</body></html>

Le focus passe automatiquement au groupe suivant !
A tester et à adapter à votre cas particulier...

:whistle:PS : il me semble qu'au départ de la discussion, la solution (lien dans la FAQ) n'était pas dans la réponse du "moderateur"....

13/06/2014, 08h28
clairetj

Merci pour vos réponses et pour le code d'exemple, je vais tester tout cela