Déplacement d'une div avec le clavier
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:
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 :mrgreen:
Code simplifié :
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
| <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 ?
