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 ?