Necesito detectar la pulsación de las flechas del teclado y tengo entendido que es con la función keydown, pretendo pulsarlas y mover esa dirreción un cubo diseñado en css, el problema lo tengo a la hora de detectar la tecla pulsada, que no sé cómo.
2 respuestas
Puedes valerte del evento keydown
, que en which
te dice que tecla fue presionada. Las flechas son 37, 38, 39, 40, creo que el código explica todo:
$(document).keydown(function(e){
switch(e.which) {
case 37:
console.log("izquierda");
break;
case 38:
console.log("arriba");
break;
case 39:
console.log("derecha");
break;
case 40: // down
console.log("abajo");
break;
default: return; // exit this handler for other keys
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Haz clic aquí primero para darme el foco, luego presiona las flechas</div>
Como mencionas es con la función keydown
, con esta función puedes mandar llamar una función anónima la cual recibe un parámetro de evento, ejemplo:
$( "a" ).click(function( event ) {
event.preventDefault();
});
con este parametro puedes hacer varias cosas, como por ejemplo detectar que tecla se preciono dependiendo a su codigo de ascii, ejemplo:
$('#input').keydown(function(e){
e.preventDefault();
if(e.keyCode == 37){
alert ("izquierda");
}
if(e.keyCode == 38){
alert ("arriba");
}
if(e.keyCode == 39){
alert ("derecha");
}
if(e.keyCode == 40){
alert ("abajo");
}
})
En este ejemplo se detectan las cuatro teclas de arriba, abajo, derecha, e izquierda Lo puedes checar en este enlace codepen