[SOLUCIONADO] Mover un div con .onkeypress

blancoarnau · #1 (**permalink**) 19/03/2014, 15:44

Hola a todos. El otro día estuve pensando un script y ahora lo he probado pero he visto que no funciona y no entiendo el error. Mi intención es que al pulsar las teclas izquierda y derecha el div se me mueva en esas direcciones. Solo lo he programado pensando en Google Chrome porque no era más que una prueba...

El HTML:

Código HTML:

Ver original<body>
<div id="objeto" style="height:100px; width:100px; background-color:black; position:absolute; top:10%; left:5%;"></div>
</body>

El script:

Código Javascript:

Ver originaldocument.onkeypress = function(a){
/*IZQUIERDA*/
if(a.keycode == 37){
    var x = document.getElementById("objeto").style.left;
    document.getElementById("objeto").style.left=(x.replace("%","")-1)+"%";
    return x;
}
/*DERECHA*/
if(a.keycode == 39){
    var x = document.getElementById("objeto").style.left;
    document.getElementById("objeto").style.left=(x.replace("%","")+1)+"%";
    return x;
}
}

blancoarnau · #2 (**permalink**) 20/03/2014, 07:18

¿Nadie tiene idea de cómo arreglarlo?

jgdev13 · #3 (**permalink**) 20/03/2014, 07:56

Puedes hacerlo con un setInterval y con las funciones "keydown" y "keyup", que cuando el interval esté pausado, presiones la tecla que desees y lo ponga en movimiento y cuando la sueltes lo pause nuevamente, mira un ejemplo:

Código HTML:

Ver original<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <script>
    window.onload = function() {
      var rigthPress = false,
          leftPress = false,
          intervalVelocity = 200;
      
      // Function to move divs
      setInterval(function() {
        
        if(rigthPress && !leftPress) {
          // Mover div a la derecha
          console.log('derecha')
        }
        
        if(leftPress && !rigthPress) {
          // Mover div a la izquierda
          console.log('izquierda')
        }
      
      }, intervalVelocity)
      
      document.onkeydown = function(e) {
        if(e.keyCode == 37) {
          // activar movimiento a la izquierda
          leftPress = true;
        }
        if(e.keyCode == 39) {
          // activar movimiento a la derecha
          rigthPress = true;
        }
      }
      
      document.onkeyup = function(e) {
        if(e.keyCode == 37) {
          // desactivar movimiento a la izquierda
          leftPress = false;
        }
        if(e.keyCode == 39) {
          // desactivar movimiento a la derecha
          rigthPress = false;
        }
      }
    }
  </script>
</head>
<body>
  
</body>
</html>

quimfv · #4 (**permalink**) 20/03/2014, 08:05

Esta solución se parece mas a lo que intentabas.

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onkeypress="desplazar(event)">
<div id="objeto" style="height:100px; width:100px; background-color:black; position:absolute; top:10%;color:white"></div>
<script language="JavaScript" type="text/JavaScript">
document.getElementById("objeto").style.left="5%";
document.getElementById("objeto").innerHTML=document.getElementById("objeto").style.left;
function desplazar(event){
var x = document.getElementById("objeto").style.left;
/*IZQUIERDA*/
if(event.keyCode == 37){
        var xx=parseInt(x.replace("%",""))-1;
    var direccion="IZQUIERDA";
}
//alert(document.getElementById("objeto").style.left);
/*DERECHA*/
if(event.keyCode == 39){
        var xx=parseInt(x.replace("%",""))+1;
    var direccion="DERECHA";
}
document.getElementById("objeto").style.left=xx+"%";
document.getElementById("objeto").innerHTML=document.getElementById("objeto").style.left+"<br />"+direccion;
}
</script></body>
</html>

blancoarnau · #5 (**permalink**) 20/03/2014, 15:10

Entendí el código pero después lo ejecute y no funciona... ¿Hay algún error o solo funciona con determinados navegadores?

Ito79 · #6 (**permalink**) 20/03/2014, 17:17

Hola,

No funciona porque el evento onkeypress no se dispara con las teclas de las flechas, si cambias en la línea del body el onkeypress por onkeydown, ya te funcionará ;)

Código:

<body onkeydown="desplazar(event)">

Sólo he probado en chrome, pero he leído que onkeypress puede funcionar en algunos navegadores y que onkeydown funciona en todos (o la mayoría)

Un saludo
// Ito

blancoarnau · #7 (**permalink**) 21/03/2014, 00:56

Muchas gracias a todos ^^

quimfv · #8 (**permalink**) 21/03/2014, 01:36

Cita:

Sólo he probado en chrome, pero he leído que onkeypress puede funcionar en algunos navegadores y que onkeydown funciona en todos (o la mayoría)

En firefox funcionaba.....