Discussion :

[marts]

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 :

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();">
	<!-- ... -->

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.

Pour pallier à ça, j'ai modifié mon code comme suivant :

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();">
	<!-- ... -->

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.

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.

[le_chomeur]

passe par la récupération de tout tes champs sélect comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
var listeDeSelect = document.getElementsByTagName('select');
//puis tu boucles sur chacun :
 
for(var i = 0, l = listeDeSelect.length; i < l ; i++){
listeDeSelect[i].onChange = fonctionQuirécupèreleprochainfocus().focus();
listeDeSelect[i].onKeyDown= testTouche();
}
 
function testTouche(){
if (event.keyCode==38 || event.keyCode==40) trueDestChange=false;else trueDestChange=true;"
}

voila les grandes lignes

[marts]

Je n'avais pas pensé à getElementsByTagName.
Effectivement, ce sera plus simple comme ça.
Merci.

[marts]

Pour ceux que ça intéresserait, j'ai amélioré ma manière de faire.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
	var trueChange;
	var listes=document.getElementsByTagName('select');
	var followingField=new Array();
	for (var i in listes)
	{
		listes[i].onfocus=function() {trueChange=false;}
		listes[i].onkeydown=function() {trueChange=(event.keyCode==9);} // 9 = code touche TAB
		listes[i].onmousedown=function() {trueChange=true;}
 
		// recherche de l'élément suivant
		followingField[i]=listes[i].nextSibling;
		while (followingField[i]!=null && followingField[i].tagName!='select' && followingField[i].tagName!='input' && followingField[i].tagName!='textarea') followingField[i]=followingField[i].nextSibling;
 
		if (followingField[i]!=null) listes[i].onchange=function() {if (trueChange) followingField[i].focus();}
	}