champs et tabulations

Version imprimable

Bonsoir,

Un petit problème que je n'ai pas réussi à résoudre cet après-midi.

Je cherche à faire en sorte que l'utilisateur ne soit pas obligé d'utiliser la tabulation ou sa souris pour remplir les 3 champs d'une date (jour, mois, année). J'ai donc prévu une fonction pour que le focus change dès que 2 caractères sont entrés dans le champ.

Seulement voilà, je souhaiterais également que dans le cas où l'utilisateur souhaite apporter une modification à ses valeurs (sans tout effacer), ce système soit capable de modifier certaines valeurs seulement, en les sélectionnant.

Voici ce que j'ai pour le moment :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <html> <head> </head> <body> <script language="Javascript"> function ChampSuivant(actuel, suivant, limite) { if (actuel.value.length == limite) { suivant.focus(); } } </script> <form name="form"> <input type="text" name="champ1" size=2 maxlength=2 onKeyUp="ChampSuivant(champ1,champ2,2)"> / <input type="text" name="champ2" size=2 maxlength=2 onKeyUp="ChampSuivant(champ2,champ3,2)"> / <input type="text" name="champ3" size=2 maxlength=2 onKeyUp="ChampSuivant(champ3,champ4,2)"> <br/> <input type="text" name="champ4" size=2 maxlength=2 onKeyUp="ChampSuivant(champ4,champ5,2)"> / <input type="text" name="champ5" size=2 maxlength=2 onKeyUp="ChampSuivant(champ5,champ6,2)"> / <input type="text" name="champ6" size=2 maxlength=2> </form> </body> </html>
Essayez de remplir les champs, et revenez dans le premier champ pour apporter des modifications : le focus "saute" le champ suivant et se place un champ trop loin.

Quelqu'un saurait-il m'indiquer ce que je fais de mal ? Je ne vois pas la logique qui fait que le focus aille trop loin dans ce cas.

Merci !

08/10/2009, 20h57
SpaceFrog

voir FAQ ou contributions j'y ai proposé un script il y a quelques années ...

[€dit] FAQ
http://javascript.developpez.com/faq...js#TexteSuivat
08/10/2009, 22h29
Sanvean

Merci !

J'ai remplacé focus() par select() pour pouvoir remplacer plus facilement les valeurs.

Mmmhhh...

J'ai le même phénomène avec le code suivant :
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> </head> <body> <script language="Javascript"> function Autotab(box, longueur, texte) { if (texte.length > longueur-1) { document.getElementById('TB'+box).select(); } } </script> <form name="form"> <input type="text" name="TB1" id="TB1" size=2 maxlength=2 onKeyUp="Autotab(2, this.size, this.value)"> / <input type="text" name="TB2" id="TB2" size=2 maxlength=2 onKeyUp="Autotab(3, this.size, this.value)"> / <input type="text" name="TB3" id="TB3" size=2 maxlength=2 onKeyUp="Autotab(4, this.size, this.value)"> <br/> <input type="text" name="TB4" id="TB4" size=2 maxlength=2 onKeyUp="Autotab(5, this.size, this.value)"> / <input type="text" name="TB5" id="TB5" size=2 maxlength=2 onKeyUp="Autotab(6, this.size, this.value)"> / <input type="text" name="TB6" id="TB6" size=2 maxlength=2> </form> </body> </html>
Je ne vois pas ce qui cloche... les tabindex ? Dans l'exemple proposé, ce n'est pas 1/2/3 mais 1/3/2... est-ce là mon erreur ? Si oui, j'ai du mal à comprendre le sens du tabindex "mélangé".

EDIT : j'ai trouvé la solution, que j'ai postée dans un sujet similaire au mien : http://www.developpez.net/forums/d16...ion-difficile/