onKeyPress sur les flèches du clavier

Version imprimable

Salut !

Ben Voilà, j'ai longtemps cherché, mais je n'ai toujours pas trouvé de solution. Voici mon problème (tout simple !) :

On a une page html avec une table :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <html> <body> <form name="formulR" method="POST" action="page.htm"> <table cellpadding=0 cellspacing=0 border> <tr> <td><input name=tab00 /></td> <td><input name=tab01 /></td></tr> <tr> <td><input name=tab10 /></td> <td><input name=tab11 /></td></tr> </table> <br /> <input type=submit value=' Go ! ' /> </form> </body> </html>
Je voudrais pouvoir déplacer le curseur, dans cette table, mais uniquement avec les flèches du clavier (pas "Tab").
J'ai pensé le faire en Javascript avec onKeyPress et la méthode ASCII mais apparement aucun nombre ASCII ne correspond à ces touches. :?

Quelqu'un aurait-il une idée ?

merci d'avance ! :)

09/01/2006, 17h52
SpaceFrog

keycode 37 38 39 40
09/01/2006, 17h58
trepidelhia

Je viens d'essayer, ça ne marche pas, peut-être parce que les nombres que tu m'as donnés correspondent à ça :

37 %
38 &
39 '
40 (

?
09/01/2006, 18h02
grinder59

affiche un tableau de correspondance (de 1 à 255 je crois) entre les codes et les caractères, tu auras ceux que tu veux mais en plus tous les autres
09/01/2006, 18h06
trepidelhia

Je l'ai déjà fait, mais apparement ces touches n'ont pas d'équivalent en code, peut-être tout simplement parce que ce ne sont pas des caractères...

alors que faire :roll:
10/01/2006, 02h27
ozzmax

effectivement les touche des fleches ne sont pas atteignable par event en utilisant le keycode...dommage pourtant ce doit etre atteignable???!! :oops:

si si la preuve ...

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>

10/01/2006, 18h42
trepidelhia

Ouah, là je dois avouer que ça m'épate ce ptit programme !

En fait mon problème venait du fait qu'il n'y a pas de onKeyPress sur les flèches, mais juste des onKeyUp et onKeyDown.

SpaceFrog, j'ai 2 choses à te dire :

1) Merci ! :wink: