Navigation clavier buggée (event+key)

**xephres** · 04/09/2010, 13h48

Bonjour

Je m'entraine au langage javascript et pour cela ai créé une barre de navigation js avec menu déroulant, exploitant le clavier et les events.

Tout se passe bien lors de la navigation à la souris. Au clavier, c'est autre chose. Je me heurte à deux problèmes face auxquels je tourne en rond.

Sous firefox, sur le premier lien (première rubrique "parente"), la nav ne se déploie pas. Elle se déploie en appuyant sur alt ou lorsque j'ai parcouru toute la nav et reviens au début.

Sous IE 7, le problème n'apparait pas au début, par contre, lorsque j'ai parcouru une fois la nav et recommence. C'est comme si mon code bouclait; IE rame puis plante.

Le fichier de test est en pièce jointe. Si quelqu'un a du temps pour jeter un oeil...

Merci

**xephres** · 07/09/2010, 10h39

Bonjour,

J'ai tenté une approche pas-à-pas simplifiée et le problème apparait clairement dans le fichier joint.

Mais je vais tenter d'expliquer sommairement.

Sous firefox comme sous IE, il semble impossible de cibler la première balise <a> via un keydown. Si j'affiche les balises détectées, cela affiche HTML puis la deuxième balise A, sous firefox, BODY puis A, sous IE. Ce comportement donne l'impression de "sauter" un élément. Est-ce que cela revient à rendre ma tentative de navigation au clavier caduque ou y-a-t'il quelque chose dans la gestion du dom que je n'ai pas compris?

Si quelqu'un peut éclairer ma lanterne...

Merci

**SpaceFrog** · 07/09/2010, 11h00

si le souci est au niveau des keycodes ect, voici qui peut t'aider a debusquer le souci

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>

**xephres** · 07/09/2010, 12h13

Bonjour,

Merci pour la suggestion. Après test sous IE, Chrome, Opéra et Firefox, l'incohérence n'apparait plus que sous Firefox avec 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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
	function main() {
		document.onkeydown = function(event)
		{
			if (typeof event == "undefined" ) event = window.event;
			actif(event);
		}
	}
 
	function listener(obj,evType,fn)
	{
		if(obj.addEventListener)
		{
			obj.addEventListener(evType,fn,false);
		} 
		else if(obj.attachEvent)
		{
			obj.attachEvent("on"+evType,fn) ;
		}
	}
 
	function actif(e)
	{
		var el= e.target||e.srcElement;
 
		if(!el.tagName)
		{
			el=el.parentNode;
		}
 
		if(el.tagName == 'A')
		{
			alert(el.tagName);
		}
	}

avec ce contenu html

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
	<body>
		<dl>
			<dt>
				<a id="bloc1" href="#">lien</a>
			</dt>
			<dd>
				<ul>
					<li><a id="thumb1" href="#">lien</a></li>
				</ul>
			</dd>
		</dl>
	</body>

Il n'arrive pas à "stopper" sur la balise a du dt. currentTarget, à la place de target, renvoie undefined ou HTML si j'ajoute ".documentElement.tagName".
Peut-il s'agir d'un problème de propagation/bouillonnement ou bel et bien d'un bug firefox sachant que les autres navigateurs renvoient bien "A" comme tagName, que ce soit IE, Chrome ou Opéra?

Si quelqu'un peut tester mon fichier html sous d'autres navigateurs que firefox 3.6.8, IE 7, Opéra 10.61 et Chrome 5.0. La navigation se fait par la touche tab ou maj+fleche.

Merci

**xephres** · 07/09/2010, 18h59

Bonjour, bonsoir,

J'ai finalement trouvé l'astuce. Il suffit de forcer le focus.

Tout est dans le fichier joint, avec un exemple simple.

Merci quand même :-p

Navigation clavier buggée (event+key)

JavaScript

Discussions similaires

Partager

Partager