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

**bigben89** · 21/11/2008, 15h05

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 :

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
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 ?

**Sub0** · 22/11/2008, 12h15

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

**bigben89** · 24/11/2008, 10h59

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)

**Bovino** · 24/11/2008, 11h02

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

**bigben89** · 24/11/2008, 11h32

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.

**Sub0** · 24/11/2008, 11h36

Si tu as un input, la flèche du bas doit servir au tabindex... je vois que ça.

**bigben89** · 24/11/2008, 14h51

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 :

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

<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

**SpaceFrog** · 24/11/2008, 14h53

Teste le retour de tes touches avec ce code :

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
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>

**bigben89** · 24/11/2008, 15h00

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

**SpaceFrog** · 24/11/2008, 15h02

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

**bigben89** · 24/11/2008, 15h17

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.

**SpaceFrog** · 24/11/2008, 15h35

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

**bigben89** · 24/11/2008, 15h58

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

**SpaceFrog** · 24/11/2008, 16h05

HA ok je vois ...

Code :

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

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

**Bovino** · 24/11/2008, 16h10

Attention, si le keydown fonctionne, il enverra la requête sans le dernier caractère tapé.

**SpaceFrog** · 24/11/2008, 16h13

oui ou tout simplement attendre le resultat du keyup en ayant avant recupéré les autres ...

**bigben89** · 24/11/2008, 17h20

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é.

**Sub0** · 26/11/2008, 14h02

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...

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

JavaScript

Discussions similaires

Partager

Partager