[event.keyCode] Détection de la flèche bas sous Opera

Version imprimable

Je veux faire un champ texte me permettant de rentrer un nombre d'élément et de l'incrémenter ou le décrémenter en appuyant sur les flèches haut et bas.
J'ai donc fait le code suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script type="text/javascript"> function intercepterTouche(event, key) { if(event.keyCode == 38) // flèche du haut { changePanier(id_prod, 1); }else if(event.keyCode == 40 && $('qte_'+id_prod).value > 1) // flèche du haut { changePanier(id_prod, -1); }else{ setQtePanier(id_prod); } } </script> ... <input type="text" size="2" value="<?=$val["qte"]?>" id="qte_<?=$key?>" onkeyup="intercepterTouche(event, <?=$key?>)" />
Mon code fonctionne sans problème sous IE, Firefox, Safari, Chrome, mais Opera semble avoir un problème avec la flèche du bas.
Quand je met alert(event.keyCode) au début de ma fonction intercepterTouche, il ne m'affiche rien quand j'appuie sur la flèche bas, alors que j'ai bien la boite de dialogue quand j'appuie sur la flèche haut ou les autres touches.
Est-ce normal, y a-t'il un moyen de résoudre le problème ?

22/11/2008, 12h15
Sub0

La flèche du bas de cette démo fonctionne-t-elle avec Opera ?
http://sub0.developpez.com/javascrip...er/clavier.htm
24/11/2008, 10h59
bigben89

La démo fonctionne, la flèche du bas répond effectivement.
Je me demande qu'est-ce qui cloche sur mon code.
Est-ce que la présence d'autres codes javascript sur ma page peut poser problème, court-circuiter certains évènements ou quelque chose dans le genre ? (dans ma page, j'ai les librairies prototype et scriptaculous d'inclues, entre autres)
24/11/2008, 11h02
Bovino

Ben oui, si d'autres actions sont associées à la flèche bas, ça peut créer des conflits !
24/11/2008, 11h32
bigben89

Citation:

Ben oui, si d'autres actions sont associées à la flèche bas, ça peut créer des conflits !

J'ai beau chercher dans mon code, je ne vois pas ce qui pourrait court-circuiter la flèche du bas. Tous les autres évènements que j'ai trouvés sont rattachés soit au click, soit au mouseover, donc à priori, ça ne devrait pas poser problème.
D'ailleurs, si l'action était court-circuitée, ça devrait se ressentir sur les autres navigateurs, aussi.
Je trouve ça bizarre que cela ne pose problème qu'avec Opera.

Le seul évènement que je vois rattaché à une quelconque touche dans mon code, c'est le onkeyup dans mon input, donc je vois pas ce qui peut poser problème, il est sensé intercepter toutes les touches quand le focus est sur mon champ texte, en théorie, comme dans les autres navigateurs.
24/11/2008, 11h36
Sub0

Si tu as un input, la flèche du bas doit servir au tabindex... je vois que ça.
24/11/2008, 14h51
bigben89

Pour m'assurer que le problème ne venait pas de script extérieur, genre prototype ou autre, j'ai fait une page html on ne peut plus simpliste, avec cette simple ligne :

Code:

<input type="text" onkeyup="alert(event.keyCode)"/>

Je n'ai toujours pas d'alert quand j'appuie sur la touche bas, alors que je l'ai pour les autres flèches !
Est-ce que ça vous fait la même chose si vous testez chez vous cette simple ligne sous Opera, ou alors c'est mon Opera qui est complètement buggé ?

PS : Je suis sous Opera 9.62 / Win XP SP3

Teste le retour de tes touches avec ce code :

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
<html>
<head>
<title>Keyboard Events and Codes</title>
<style type="text/css">
body         { font-family: Arial, sans-serif }
h1           { text-align: right }
td           { text-align: center }
</style>
 
 
<script language="JavaScript" type="text/javascript">
// array of table cell ids
var tCells = ["downKey", "pressKey", "upKey", "downChar", "pressChar", "upChar", "keyTarget", "character"];
// clear table cells for each key down event 
function clearCells() {
	for (var i = 0; i < tCells.length; i++) {
			document.getElementById(tCells[i]).innerHTML = "&mdash;"; 
			} 
} 
 
// display target node's node name
function showTarget(evt) { 
	var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
	if (node) { 
				document.getElementById("keyTarget").innerHTML = node.nodeName; 
				}
		 }
 
// decipher key down codes 
function showDown(evt) {
		clearCells(); 
		evt = (evt) ? evt : ((event) ? event : null); 
		if (evt) { document.getElementById("downKey").innerHTML = evt.keyCode; 
					if (evt.charCode) { 
											document.getElementById("downChar").innerHTML = evt.charCode; 
											} 
					showTarget(evt); }
		}
 
 // decipher key press codes 
 function showPress(evt) {
 		 evt = (evt) ? evt : ((event) ? event : null);
 		 if (evt) {
 		 			 document.getElementById("pressKey").innerHTML = evt.keyCode;
 		 			 if (evt.charCode) {
 		 			 						document.getElementById("pressChar").innerHTML = evt.charCode;
 		 			 						} 
 		 			 showTarget(evt);
 		 			 var charCode = (evt.charCode) ? evt.charCode : evt.keyCode; 
 		 			 // use String method to convert back to character 
 		 			 document.getElementById("character").innerHTML = String.fromCharCode(charCode); 
 		 			 }
 		 	}
 
// decipher key up codes 
function showUp(evt) {
					evt = (evt) ? evt : ((event) ? event : null);
					if (evt) { document.getElementById("upKey").innerHTML = evt.keyCode;
								if (evt.charCode) { 
													  document.getElementById("upChar").innerHTML = evt.charCode; 
													  } 
								showTarget(evt); 
								}
					 }
 
// set page-wide event listeners
 document.onkeydown = showDown; 
 document.onkeypress = showPress; 
 document.onkeyup = showUp; 
 </script> 
 
 
 
</head>
 
<body>
<h1>Key and Character Codes vs. Event Types</h1>
<hr>
<p>Enter some text with uppercase and lowercase letters:<br>
</p>
<form>
	<input type="text" id="entry" size="60" onkeydown="showDown(event)"	onkeypress="showPress(event)" onkeyup="showUp(event)">
</form>
<table border="2" cellpadding="5" cellspacing="5">
	<caption>Keyboard Event Properties</caption>
	<tr>
		<th>Data</th>
		<th>keydown</th>
		<th>keypress</th>
		<th>keyup</th>
	</tr>
	<tr>
		<td>keyCode</td>
		<td id="downKey">—</td>
		<td id="pressKey">—</td>
		<td id="upKey">—</td>
	</tr>
	<tr>
		<td>charCode</td>
		<td id="downChar">—</td>
		<td id="pressChar">—</td>
		<td id="upChar">—</td>
	</tr>
	<tr>
		<td>Target</td>
		<td id="keyTarget" colspan="3">—</td>
	</tr>
	<tr>
		<td>Character</td>
		<td id="character" colspan="3">—</td>
	</tr>
 
 
</table>
 
</body>
</html>

24/11/2008, 15h00
bigben89

Il semble que seul le keyup pose problème : il s'affiche bien pour toutes les autres touches, mais pour la flèche du bas, seuls keydown et keypress sont affichés
24/11/2008, 15h02
SpaceFrog

et bien passe par la gestion des exceptions teste si il y a un retour de keyup, et si y'a rien verifie le keypress
24/11/2008, 15h17
bigben89

Je viens de tester ton code sur différents navigateurs, il semble que le keypress ne soit pas détecté pour les touches directionnelles sous WebKit (j'ai le même problème sous Chrome Beta et Safari 3.1.1).
Ce qui m'embête beaucoup dans le fait d'utiliser le keydown ou keypress, c'est que dans ma page, à chaque fois que je change de valeurs (flèche haut, flèche bas ou nouvelle valeur), je lance une requête ajax qui met à jour une quantité stockée en session sur le serveur et me renvoie le prix total de mon panier. Avec le keyup, ça va, mais avec keydown ou keypress, ça va me générer un paquet de requête d'affilée.
24/11/2008, 15h35
SpaceFrog

ben non pourquoi veux tu ???

le test est en amont de la requete

tu teste le onkeyup et si il est vide tu recupères le keypress ...
cen'est qu'après avoir recupéré un seul code de touche que tu envoies la requete
24/11/2008, 15h58
bigben89

Je ne suis pas sûr de bien comprendre la technique.
Comment je fais pour tester le onkeyup sur la touche bas (la seule qui pose problème) si justement le onkeyup n'est pas déclenché. Je ne sais pas à ce moment quand tester le onkeypress
24/11/2008, 16h05
SpaceFrog

HA ok je vois ...

Code:

onkeydown="showDown(event)" onkeypress="showPress(event)" onkeyup="showUp(event)"

alors je tenterais de gerer les trois appels avec un decalage (setTimeout) et de faire un clearTimeout des précédents en cas de succès
ou de modifier une vairable globale sur une serie de tests ...
ainsi à la fin des 3 tu auras le code voulu et tu ne mancera qu'une requete
24/11/2008, 16h10
Bovino

Attention, si le keydown fonctionne, il enverra la requête sans le dernier caractère tapé.
24/11/2008, 16h13
SpaceFrog

oui ou tout simplement attendre le resultat du keyup en ayant avant recupéré les autres ...
24/11/2008, 17h20
bigben89

Désolé si je parais un peu chiant, mais serait-il possible de poster un petit exemple de code, parce que je ne vois pas comment implémenter ça de manière simple et que ça marche sur tous les navigateurs.
Par exemple, tous les navigateurs n'interprètent pas les évènements sur les touches de manières différentes : il semble notamment que sur WebKit, l'évènement onkeypress, par exemple, se déclenche lors de l'appui sur un caractère et non pas d'une touche en général, excluant de fait toutes les touches n'affichant pas de caractères (comme les touches directionnelles, ctrl, alt, F1-F12, ...), donc s'appuyer sur keypress risque potentiellement de poser problème sur Safari et Chrome.
Je ne suis pas spécialement un crack en javascript, et là je commence à être un peu dépassé.
26/11/2008, 14h02
Sub0

Avec Javascript, tu peux détecter le navigateur utilisé et adapter le code en conséquence.
Selon moi, tu devrais surtout te concentrer sur les navigateurs les plus utilisés.

ps: N'oublis pas que Javascript peut être désactivé par le client...