Ne pas permettre le changement des valeurs d'un select avec les touches de direction

Version imprimable

20/10/2007, 16h04
ouedmouss

Ne pas permettre le changement des valeurs d'un select avec les touches de direction

Bonsoir.
J'ai un petit problem avec le composant select html (combo box) .
En fait lorsqu'on ait sur ce composant et que l'on presse les touches de directions (direction haut, bas, gauche,droite), la valeuer courante du select change.
Je veux annuler ce comportement.

En fait je suis en train de faire un script qui doit pouvoir permettre de naviguer via les touches de directions dans un table. Tout est ok a part que mon composant select, change sa valeur courante. lorsqu'on presse les touches indiquees.

Merci d'avance...
20/10/2007, 18h24
SpaceFrog

sur le onkeydown tu choppe le keycode qui correspond aux touches de direction et tu fais un return false...

merci pour ta reponse...
Mais j'ai fais un petit exemple avec le code que tu a donne qui ne marche pas

le select html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<select id="comboTest">
				<option>
					Alpha solidarite
				</option>
				<option>
					Loc
				</option>
				<option>
					Lavigeri
				</option>
			</select>

Le code javascript

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
25
26
27
28
29
30
31
 
function init(){
	var select=document.getElementById("comboTest");
	select.addEventListener("keydown",test,false);
}
 
function test(e){
		if(window.event){ // IE
				keynum = e.keyCode
			}else if(e.which){ // Netscape/Firefox/Opera
				keynum = e.which
			}		
 
			if (keynum==38){//l'utilisateur a clique sur la touche haut
				return false;
			}
			if (keynum==40){//l'utilisteur a clique sur la touche bas
				return false;
			}
			if (keynum==39){//l'utilisateur a clique sur direction droite
				return false;	
			}
			if (keynum==37){//l'utilisateur a clique sur direction gauche
				return false;	
			}
			return true;
}
 
 
 
window.addEventListener("load",init,false);

La fonction test s'execute bien lorsqu'on saisie sur les touches de direction. Les keynum sont aussi ok (j'avais mis des alerts pour verifier tout ca)...
Mais le return n'a pas l'air d'empecher le changement de valeur du select....

Une idee

22/10/2007, 08h47
SpaceFrog

onmousedown ...
23/10/2007, 01h04
ouedmouss

Bonsoir..
C'est bien onkeydown.
Je ne veux pas que le changement soit effectue lorsqu'on tape (avec le clavier) sur lestouche de direction (ce qui est le comportement par defaut pour le composant html select).
J'ai implemente le return false. mais rien n'y fait ...
merci

Bon alors voici l'état d'avancement de mes recherches:

Ce code focntionne sous IE, mais il semble que firefox declenche tout de même le keypressed après le onkeydown, et ce makgré un stoppropagation :(
ce qui rend l'effet du preventDefault inutile ...

Si quelqu'un sait comment annuler le retour d'une touche de direction sous firefox ...

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<title>Nouvelle page 1</title>
 <script type="text/javascript">
 
 
function test(event){
 	var keyNum
 	var IsIE=!!document.all;
	var event = event || window.event; 
	if (event.keyCode) {keyNum = event.keyCode;}
	else if (event.which) {keyNum = event.which; }
 
      //  alert(keyNum)
        switch (true){
        		case ( (keyNum>32 && keyNum<41) || keyNum==56 || keyNum==104 || keyNum==65464):     
        									if (IsIE) {event.returnValue = false;	}
        									else if (event.preventDefault) { 
 
        									event.preventDefault( );}
        									else {return false;}
        									break;
 
        		case ( keyNum==50|| keyNum==98 || keyNum==65458 ):  
							        		if (IsIE) {event.returnValue = false;	}
          									else if (event.preventDefault) {
 
          									event.preventDefault( );}
        									else {return false;}
        									break;
 
				case ( keyNum==54 || keyNum==102 || keyNum==65462 ):     
										   if (IsIE) {event.returnValue = false;	}
    										else if (event.preventDefault) { 
 
    										event.preventDefault( );}
        									else {return false;}
        									break;
 
				case ( keyNum==52 || keyNum==100 || keyNum==65460):     
        									if (IsIE) {event.returnValue = false;	}
        									else if (event.preventDefault) { 
 
        									event.preventDefault( );}
        									else {return false;}
        									break;
 
 
 
 
        }
 
}
</script> 
 
 
</head>
 
 
<body>
<select id='comboTest' onkeydown="test(event); " >
<option>un</option>
<option>deux</option>
</select>
 
</body>
 
</html>