Je me suis trouvé confronté au problème suivant :
Dans un formulaire, j'utilise des gestionnaires d'évènements pour auto-tabuler d'un champ à l'autre dès que les informations saisies sont satisfaisantes. Ainsi, l'utilisateur gagne un peu de temps en évitant la touche TAB.
Le problème survient sur un <select> sous Internet Explorer.
Au départ j'avais le code suivant :
Tout marche bien si on sélectionne à la souris dans le <select>. Mais quand celui-ci a le focus, onchange se déclenche dès que l'on descend ou que l'on monte au clavier dans la liste. Résultat : impossible de sélectionner au clavier.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12 <!-- ... --> destination : <select id="dest" onchange="document.getElementById('num_vol').focus();"> <option>AAE</option> <option>AAH</option> <option>AAL</option> <option>AAP</option> <option>AAR</option> <!-- ... --> </select> n° vol : <input type="text" id="num_vol" onkeyup="this.value=this.value.toUpperCase();if (this.value.length==7) document.getElementById('nb_pax').focus();"> <!-- ... -->
Pour pallier à ça, j'ai modifié mon code comme suivant :
Des gestionnaires d'évènements gèrent le focus selon que la sélection a eu lieu au clavier ou à la souris. Les codes 38 et 40 correspondent respectivement aux touches flèche-haut et flèche-bas.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13 <script language="javascript">var trueDestChange=true;</script> <!-- ... --> destination : <select id="dest" onchange="document.getElementById('num_vol').focus();" onkeydown="if (event.keyCode==38 || event.keyCode==40) trueDestChange=false;else trueDestChange=true;" onmousedown="trueDestChange=true;"> <option>AAE</option> <option>AAH</option> <option>AAL</option> <option>AAP</option> <option>AAR</option> <!-- ... --> </select> n° vol : <input type="text" id="num_vol" onfocus="if (!trueDestChange) document.getElementById('dest').focus();" onkeyup="this.value=this.value.toUpperCase();if (this.value.length==7) document.getElementById('nb_pax').focus();"> <!-- ... -->
C'est parfaitement fonctionnel, mais j'ai un grand nombre de <select> dans un grand nombre de formulaires à modifier, donc j'aurais voulu savoir, avant de me lancer dans ce travail de titan, si quelqu'un aurait une solution plus simple.
Merci à vous.
Partager