onKeyPress sur les flèches du clavier

**trepidelhia** · 09/01/2006, 18h48

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 :

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

**SpaceFrog** · 09/01/2006, 18h52

keycode 37 38 39 40

**trepidelhia** · 09/01/2006, 18h58

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 (

?

**grinder59** · 09/01/2006, 19h02

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

**trepidelhia** · 09/01/2006, 19h06

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

**ozzmax** · 10/01/2006, 03h27

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

**SpaceFrog** · 10/01/2006, 09h39

si si la preuve ...

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>

**trepidelhia** · 10/01/2006, 19h42

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 !

onKeyPress sur les flèches du clavier

JavaScript

Vue hybride

Discussions similaires

Partager

Partager