Detectar pulsaciones de teclas de flecha en JavaScript

460

¿Cómo detecto cuando se presiona una de las teclas de flecha? Usé esto para descubrir:

function checkKey(e) {
    var event = window.event ? window.event : e;
    console.log(event.keyCode)
}

Aunque funcionó para cualquier otra tecla, no lo hizo para las teclas de flecha (tal vez porque se supone que el navegador se desplaza en estas teclas de forma predeterminada).

mihsathe
fuente

Respuestas:

735

Las teclas de flecha solo se activan por onkeydown, no onkeypress.

Los códigos clave son:

  • izquierda = 37
  • arriba = 38
  • derecha = 39
  • abajo = 40
Mark Kahn
fuente
15
Algunos navegadores activan keypresseventos para las teclas de flecha, pero tienes razón, eso keydownsiempre funciona para las teclas de flecha.
Tim Down
44
Si presiona%, también obtiene keyCode 37
xorcus
99
@xorcus - No, obtienes 53un keydownevento. Se obtiene 37con el keypress, que es una cosa diferente
Marcos Kahn
77
¿Qué pasa con onkeyup?
1nfiniti
2
@MrCroft - o también escucha onkeyupy detiene el evento allí. Sin embargo, de manera realista no deberías modificar el comportamiento de la interfaz de usuario con Javascript.
Mark Kahn el
225

Función de llamada arriba y abajo de la tecla. Hay diferentes códigos para cada clave.

document.onkeydown = checkKey;

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        // up arrow
    }
    else if (e.keyCode == '40') {
        // down arrow
    }
    else if (e.keyCode == '37') {
       // left arrow
    }
    else if (e.keyCode == '39') {
       // right arrow
    }

}
ketan
fuente
¿Qué hace la segunda línea?
eshellborn
16
Para aclarar, 'e || window.event 'significa que si' e 'es un valor definido, será el resultado de' || ' expresión. Si 'e' no está definido, 'window.event' será el resultado de '||' expresión. Entonces es básicamente una forma abreviada de: e = e ? e : window.event; O:if (typeof(e) === "undefined") { e = window.event; }
Michael Calvin
17
Es para que funcione en versiones antiguas de IE (pre IE9) donde el evento no se pasó a la función de controlador.
Mark Rhodes
12
Solo para tener en cuenta que KeyCode es un número y === debería usarse idealmente
alexrogers
11
@ketan, el punto era que keyCode es un número y debe verificarse como keyCode === 32, no keyCode == '32'o keyCode === '32'.
Nenotlep
98

event.key === "ArrowRight" ...

Más reciente y mucho más limpio: uso event.key. ¡No más códigos de números arbitrarios! Si está transpilando o sabe que sus usuarios están en navegadores modernos, ¡use esto!

node.addEventListener('keydown', function(event) {
    const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
});

Manejo detallado:

switch (event.key) {
    case "ArrowLeft":
        // Left pressed
        break;
    case "ArrowRight":
        // Right pressed
        break;
    case "ArrowUp":
        // Up pressed
        break;
    case "ArrowDown":
        // Down pressed
        break;
}

Puede ampliar esto fácilmente para verificar "w", "a", "s", "d"o cualquier otra clave

Documentos de Mozilla

Navegadores Soportados

PS event.codees lo mismo para flechas

Gibolt
fuente
55
Gracias por usar keyy no keyCode, eso fue obsoleto.
v010dya
8
Nota de MDN: Internet Explorer, Edge (16 y anteriores) y Firefox (36 y anteriores) usan "Izquierda", "Derecha", "Arriba" y "Abajo" en lugar de "ArrowLeft", "ArrowRight", "ArrowUp "y" ArrowDown ".
Simon
95

Posiblemente la mejor formulación:

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            alert('left');
            break;
        case 38:
            alert('up');
            break;
        case 39:
            alert('right');
            break;
        case 40:
            alert('down');
            break;
    }
};

Demostración (gracias al usuario Angus Grant): http://jsfiddle.net/angusgrant/E3tE6/

Esto debería funcionar entre navegadores. Deja un comentario si hay un navegador donde no funciona.

Hay otras formas de obtener el código clave (e.which, e.charCode y window.event en lugar de e), pero no deberían ser necesarias. Puede probar la mayoría de ellos en http://www.asquare.net/javascript/tests/KeyCode.html . Tenga en cuenta que event.keycode no funciona con onkeypress en Firefox, pero sí funciona con onkeydown.

1 ''
fuente
3
Tuve que buscar la definición de conciso , luego (alegremente) postulé que la prueba era una conjugación inadecuada; ay, lo reconozco: mi solicitud fue refutable .
ashleedawg
20

Uso keydown, no keypresspara teclas no imprimibles como las teclas de flecha:

function checkKey(e) {
    e = e || window.event;
    alert(e.keyCode);
}

document.onkeydown = checkKey;

La mejor referencia de evento clave de JavaScript que he encontrado (superando el modo peculiar, por ejemplo) está aquí: http://unixpapa.com/js/key.html

Tim Down
fuente
16

Respuesta moderna ya que keyCode ahora está en desuso a favor de key :

document.onkeydown = function (e) {
    switch (e.key) {
        case 'ArrowUp':
            // up arrow
            break;
        case 'ArrowDown':
            // down arrow
            break;
        case 'ArrowLeft':
            // left arrow
            break;
        case 'ArrowRight':
            // right arrow
    }
};
Joshua Fan
fuente
12

Creo que el método más reciente sería:

document.addEventListener("keydown", function(event) {
  event.preventDefault();
  const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
  switch (key) { // change to event.key to key to use the above variable
    case "ArrowLeft":
      // Left pressed
      <do something>
      break;
    case "ArrowRight":
      // Right pressed
      <do something>
      break;
    case "ArrowUp":
      // Up pressed
      <do something>
      break;
    case "ArrowDown":
      // Down pressed
      <do something>
      break;
  }
});

Esto supone que el desarrollador quiere que el código esté activo en cualquier lugar de la página y el cliente debe ignorar cualquier otra pulsación de teclas. Eliminar el evento.preventDefault (); la línea si se presionan teclas, incluidas las capturadas por este controlador, aún debe estar activa.

lrhorer
fuente
9
function checkArrowKeys(e){
    var arrs= ['left', 'up', 'right', 'down'], 
    key= window.event? event.keyCode: e.keyCode;
    if(key && key>36 && key<41) alert(arrs[key-37]);
}
document.onkeydown= checkArrowKeys;
Kennebec
fuente
1
¿No vale la pena poner arrsfuera de la función? No hay necesidad de recrearlo en cada llamada
Duelo
8

Aquí hay un ejemplo de implementación:

var targetElement = $0 || document.body;

function getArrowKeyDirection (keyCode) {
  return {
    37: 'left',
    39: 'right',
    38: 'up',
    40: 'down'
  }[keyCode];
}

function isArrowKey (keyCode) {
  return !!getArrowKeyDirection(keyCode);
}

targetElement.addEventListener('keydown', function (event) {
  var direction,
      keyCode = event.keyCode;

  if (isArrowKey(keyCode)) {
    direction = getArrowKeyDirection(keyCode);

    console.log(direction);
  }
});
RobPW
fuente
Estoy obteniendo $ 0 no está definido var targetElement = typeof $0 !== 'undefined' ? $0 : document.body; o simplemente: var targetElement = document.body;está bien
papo
7

Así es como lo hice:

var leftKey = 37, upKey = 38, rightKey = 39, downKey = 40;
var keystate;
document.addEventListener("keydown", function (e) {
    keystate[e.keyCode] = true;
});
document.addEventListener("keyup", function (e) {
    delete keystate[e.keyCode];
});

if (keystate[leftKey]) {
//code to be executed when left arrow key is pushed.
}
if (keystate[upKey]) {
//code to be executed when up arrow key is pushed.
}
if (keystate[rightKey]) {
//code to be executed when right arrow key is pushed.
}
if (keystate[downKey]) {
//code to be executed when down arrow key is pushed.
}
OneStig
fuente
5

He podido atraparlos con jQuery:

$(document).keypress(function (eventObject) {
    alert(eventObject.keyCode);
});

Un ejemplo: http://jsfiddle.net/AjKjU/

Albireo
fuente
44
keypressno funcionará con las teclas de flecha. Tienes que usar $(document).on('keydown', function() {...})en su lugar
Juribiyan
4

Ese es el código de trabajo para Chrome y Firefox

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript">

    function leftArrowPressed() {
      alert("leftArrowPressed" );
      window.location = prevUrl  
    }

    function rightArrowPressed() {
      alert("rightArrowPressed" );
      window.location = nextUrl  
    }
    function topArrowPressed() {
      alert("topArrowPressed" );
      window.location = prevUrl  
    }

    function downArrowPressed() {
      alert("downArrowPressed" );
      window.location = nextUrl  
    }

        document.onkeydown = function(evt) {
                        var nextPage = $("#next_page_link")
                        var prevPage = $("#previous_page_link")
                        nextUrl = nextPage.attr("href")
                        prevUrl = prevPage.attr("href")
        evt = evt || window.event;
        switch (evt.keyCode) {
                case 37:
                leftArrowPressed(nextUrl);
                break;

                case 38:
                topArrowPressed(nextUrl);
                break;

                 case 39:
                rightArrowPressed(prevUrl);
                break;

                case 40:
                downArrowPressed(prevUrl);
                break;

        }
    };


</script>
</head>
<body>
<p>
<a id="previous_page_link" href="http://www.latest-tutorial.com">Latest Tutorials</a> 
<a id="next_page_link" href="http://www.zeeshanakhter.com">Zeeshan Akhter</a>
 </p>
</body>
</html>
Zeeshan Akhter
fuente
3

También estaba buscando esta respuesta hasta que encontré esta publicación.

He encontrado otra solución para conocer el código clave de las diferentes claves, cortesía de mi problema. Solo quería compartir mi solución.

Simplemente use el evento keyup / keydown para escribir el valor en la consola / alerta usando el mismo event.keyCode. me gusta-

console.log(event.keyCode) 

// or

alert(event.keyCode)

- rupam

Rupam Datta
fuente
3

Eso es mas corto.

function IsArrows (e) { return (e.keyCode >= 37 && e.keyCode <= 40); }

Andrey Vaganov
fuente
2
corto es bueno:if ([37,38,39,40].indexOf(e.keyCode)!=-1){ console.log('arrow pressed') }
animaacija
3

¡Esta biblioteca es genial! https://craig.is/killing/mice

Mousetrap.bind('up up down down left right left right b a enter', function() {
    highlight([21, 22, 23]);
});

Sin embargo, debe presionar la secuencia un poco rápido para resaltar el código en esa página.

Fandi Susanto
fuente
2

Re respuestas que necesita keydownnokeypress .

Suponiendo que desea mover algo continuamente mientras se presiona la tecla, creo que keydownfunciona para todos los navegadores, excepto Opera. Para Opera, keydownsolo se dispara en la primera pulsación. Para acomodar el uso de Opera:

document.onkeydown = checkKey;
document.onkeypress = checkKey;
function checkKey(e)
{ etc etc
Alan Finners
fuente
2

Las teclas de flecha se activan en el teclado

$(document).on("keyup", "body", function(e) {
 if (e.keyCode == 38) {
    // up arrow
    console.log("up arrow")
  }
  if (e.keyCode == 40) {
      // down arrow
      console.log("down arrow")
  }
  if (e.keyCode == 37) {
    // left arrow
    console.log("lefy arrow")
  }
  if (e.keyCode == 39) {
    // right arrow
    console.log("right arrow")
  }
})

onkeydown permite ctrl, alt, mierdas

onkeyup permite pestañas, flechas arriba, flechas abajo, flechas izquierda, flechas abajo

batMan007
fuente
1

Si usa jquery, entonces también puede hacer esto,

 $(document).on("keydown", '.class_name', function (event) {
    if (event.keyCode == 37) {
        console.log('left arrow pressed');
    }
    if (event.keyCode == 38) {
        console.log('up arrow pressed');
    }
    if (event.keyCode == 39) {
        console.log('right arrow pressed');
    }
    if (event.keyCode == 40) {
        console.log('down arrow pressed');
    }
 });
Kalyan Halder Raaz
fuente
0

controle los códigos de tecla %=37y &=38... y solo las teclas de flecha izquierda = 37 arriba = 38

function IsArrows (e) {
   return ( !evt.shiftKey && (e.keyCode >= 37 && e.keyCode <= 40)); 
}
Juver Paredes
fuente
0

Si desea detectar pulsaciones de teclas de flecha pero no necesita específicas en Javascript

function checkKey(e) {
   if (e.keyCode !== 38 || e.keyCode !== 40 || e.keyCode !== 37 || e.keyCode !== 39){
    // do something
   };
}
KitKit
fuente
0

Con llave y ES6.

Esto le brinda una función separada para cada tecla de flecha sin usar el interruptor y también funciona con las teclas 2,4,6,8 en el teclado numérico cuando NumLockestá activado .

const element = document.querySelector("textarea"),
  ArrowRight = k => {
    console.log(k);
  },
  ArrowLeft = k => {
    console.log(k);
  },
  ArrowUp = k => {
    console.log(k);
  },
  ArrowDown = k => {
    console.log(k);
  },
  handler = {
    ArrowRight,
    ArrowLeft,
    ArrowUp,
    ArrowDown
  };

element.addEventListener("keydown", e => {
  const k = e.key;

  if (handler.hasOwnProperty(k)) {
    handler[k](k);
  }
});
<p>Click the textarea then try the arrows</p>
<textarea></textarea>

voltio
fuente