Déplacement d'une div avec le clavier

**Arnaud F.** · 28/09/2009, 11h06

Bonjour,

je souhaite déplacer un élément (une div) présente dans ma page avec les flèches directionnelles.

J'ai rajouté cet observateur :

Code :

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

1
2
3
Event.observe(document.body, 'keydown', function(event) {
	moveDiv(event);
});

Ce code fonctionne, seulement, il a des effets de bords...

En effet, si j'ai un champ input dans ma page et que je clique sur l'une des flèches (gauche pour mauvaise saisie par exemple), ma div se déplace avec

Code simplifié :

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
<html>
<head>
<!-- include prototype -->
</head>
<body>
<input type="text" />
<div id="myDiv" style="position:absolute;width:100px;height:100px;left:100px;background-color:red;"></div>
<script type="text/javascript">
Event.observe(document.body, "keydown", function(event) {
var keyCode;
		if(window.event) {
			e = window.event;
			keyCode = e.keyCode;
		}
		else if(event) {
			e = event;
			keyCode = e.which;
		}
 
		pos = {left: parseInt($('myDiv').getStyle('left') || '0'),
			top: parseInt($('myDiv').getStyle('top') || '0')};
 
		switch (keyCode) {
			case 37: ; pos.left = pos.left -1;//left arrow
			    break;
			case 39: pos.left = pos.left + 1;//right arrow
			    break;
			case 38:pos.top = pos.top -1;//up arrow
			    break;
			case 40: pos.top = pos.top + 1;//down arrow
				break;
		}
		$('myDiv').setStyle({left: pos.left + 'px', top: pos.top + 'px'});
});
</script>
</body>
</html>

Mettre le focus dans le champ texte et appuyer sur les flèches directionnelles bouge la div, or je ne le souhaite pas.

Comment contourner cet effet ?

**SpaceFrog** · 28/09/2009, 11h08

jette un oeil là dessus :

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 2</title>
<script language="Javascript">
var timer;
var position= new Array(2);
var MyWay;
 
function movearound(thisway)
{ 
position[0] = parseInt(document.getElementById('MyDiv').style.top);
position[1] = parseInt(document.getElementById('MyDiv').style.left); 
 
switch(thisway)
{
case "up":
   position[0] -= 2;
   break;
 
case "do":
   position[0] += +2;
   break;
 
case "le":
   position[1] -= 2;
   break;
case "ri":
   position[1] += +2;
   break;
}
 
 
document.getElementById('MyDiv').style.top = Number(position[0]); 
document.getElementById('MyDiv').style.left = Number(position[1]);
} 
 
</script> 
<style >
input {font-family: 'symbol';}
</style>
</head>
 
 
<body>
<div id="MyDiv" style="width: 39; height: 20; top:0; left:0; background-color: blue; position: absolute; z-index:-1;" ></div> 
 
 
  <table border="0" style="cellpadding:0; cellspacing:0; " width="90">
    <tr>
      <td width="33%"></td>
      <td width="33%"><input type="button" name="up" width=this.height value="Ý" onClick="a=this.name; clearInterval(timer); timer=setInterval('movearound(a)',10);" ; / / / /></td>
      <td width="34%"></td>
    </tr>
    <tr>
      <td width="33%"><input type="button" name="le" width="100" value="Ü" onClick="a=this.name; clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
      <td width="33%"><input type="button" width="100" value="&#128;" onClick="clearInterval(timer);" /></td>
      <td width="34%"><input type="button" name="ri" width="100" value="Þ" onClick="a=this.name;clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
    </tr>
    <tr>
      <td width="33%"></td>
      <td width="33%"><input type="button" name="do" width="100" value="ß" onClick="a=this.name;clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
      <td width="34%"></td>
    </tr>
  </table>
 
</html>

**Arnaud F.** · 28/09/2009, 11h23

J'ai bien compris le principe, seulement je ne souhaite pas réaliser le déplacement en cliquant sur des boutons mais avec les flèches directionnelles...

Dans mon cas, quand je suis mon input (qu'il a le focus), les flèches agissent sur la div...

Avec le principe des boutons, ça ne m'aurait pas poser de soucis.

**SpaceFrog** · 28/09/2009, 11h29

alors ceci devrait t'aider

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>

**SpaceFrog** · 28/09/2009, 11h33

ha en fait j'avais pas saisi le fond du problème

passe par un flag boolean que tu mets à false sur le onfocus des champs de sasie et que tu repasses à true sur leur onblur
et un simple teste en première ligne de ta fonction de déplacement

Code :

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

if(flag==false){return false)

**Arnaud F.** · 28/09/2009, 11h39

Ça ne fait que confirmer ce mon problème

Quand j'entre un texte dans la zone de saisie : "blabla", keydown contient bien la dernière touche que j'ai saisie.

Par contre, si j'appuie sur <- ou -> keydown se met à jour, ce que je voudrais éviter...

De même, dans le dernier code que t'as donné, y a pas besoin d'être dans le champ texte pour que le tableau se mette à jour...

J'ai peur de pas me faire comprendre

Je voudrais faire une chose du genre :

Code :

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

Event.observe('maDIV', 'keydown', function() {});

Possible ou pas?

**SpaceFrog** · 28/09/2009, 11h42

essaye de reagrder si en passant par evt.target tu ne peux pas faire le test à savoir si c'estv un input tu fasi un return false ?

sinon un flag bool comme sus dit

**Arnaud F.** · 28/09/2009, 11h48

Envoyé par SpaceFrog

ha en fait j'avais pas saisi le fond du problème

passe par un flag boolean que tu mets à false sur le onfocus des champs de sasie et que tu repasses à true sur leur onblur
et un simple teste en première ligne de ta fonction de déplacement

Code :

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

if(flag==false){return false)

Merci d'avoir compris le fond de mon problème

, je suis passé par un flag, ça semble fonctionner.

Envoyé par SpaceFrog

essaye de reagrder si en passant par evt.target tu ne peux pas faire le test à savoir si c'estv un input tu fasi un return false ?

sinon un flag bool comme sus dit

Tiens, bonne idée pour le target, je vais essayer

**Arnaud F.** · 28/09/2009, 11h54

Pour info, je vais opter pour la solution :

Code :

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

1
2
3
if(e.target.tagName.toLowerCase() == 'input') {
	return false;
}

qui me semble plus générique, maintenable et évolutive

encore

**SpaceFrog** · 28/09/2009, 11h57

désolé pour la mise en route laborieuse ...

ça me fait ça les lundis matins ...

**Arnaud F.** · 28/09/2009, 12h05

Envoyé par SpaceFrog

désolé pour la mise en route laborieuse ...

ça me fait ça les lundis matins ...

Petite précision, pour ceux qui utilisent IE (dont moi

), evt.target ne fonctionne pas, il faut passer par document.activeElement...

Le code :

Code :

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

1
2
3
4
element = (event.target) ? event.target : document.activeElement;
if(event == null || element.tagName.toLowerCase() == 'input') {
	return false;
}

++

**Bovino** · 28/09/2009, 12h12

Petite précision, pour ceux qui utilisent IE (dont moi ), evt.target ne fonctionne pas, il faut passer par document.activeElement...

Vu que tu passes par Prototype, utilises plutôt :

Code :

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

Event.element(event)

qui te renvoie directement l'élément DOM qui a déclenché l'événement

**Arnaud F.** · 28/09/2009, 12h59

Envoyé par Bovino

Vu que tu passes par Prototype, utilises plutôt :

Code :

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

Event.element(event)

qui te renvoie directement l'élément DOM qui a déclenché l'événement

Event.element(event) ⇒ Element
Event#element() ⇒ Element
Returns the DOM element on which the event occurred. This method is deprecated, use findElement instead.

Event.findElement(event, expression) ⇒ Element
Event#findElement(expression) ⇒ Element
Returns the first DOM element that matches a given CSS selector — starting with the element on which the event occurred, then moving up its ancestor chain.

Du coup, je vois pas trop comment l'utiliser

**Bovino** · 28/09/2009, 13h13

L'ancienne doc n'est pas à jour alors...
Pour l'utilisation, vu que tu cherches à récupérer l'input, tu peux faire :

Code :

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

Event.findElement(event, 'input');

mais je pense que si tu ne passes pas de second paramètre, cela devrait te renvoyer l'élément qui a déclenché l'événement.

**Arnaud F.** · 28/09/2009, 13h21

Envoyé par Bovino

L'ancienne doc n'est pas à jour alors...

En même temps, vu que la doc est ancienne

Pour les utilisateurs de prototype :

Code :

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

1
2
3
if(event == null || Event.findElement(event, 'input')) {
	return false;
}

Sinon, l'autre solution reste valable

Déplacement d'une div avec le clavier

JavaScript

Discussions similaires

Partager

Partager