Cómo detectar la tecla Flecha arriba
document.addEventListener('keydown', (event) => {
if (event.key === "ArrowUp") {
// Arrow Up was pressed
}
});Usa event.key para reaccionar al significado de la tecla (sigue la distribución del teclado) y event.code para su posición física, por ejemplo WASD en juegos. keyCode y which están obsoletos: siguen funcionando, pero sus valores varían entre navegadores y distribuciones.
Cómo tratan los navegadores la tecla Flecha arriba
Las teclas de flecha desplazan la página y mueven el cursor. En listas desplegables, menús y cuadrículas personalizadas, gestiónalas para mover el foco entre elementos y llama a preventDefault() para que la página no se desplace al mismo tiempo.
En React
<input onKeyDown={(e) => { if (e.key === "ArrowUp") { /* … */ } }} />Buscador de Keycodes JavaScript
Pulsa cualquier tecla y mira al instante todas las propiedades del evento de teclado, con un fragmento keydown listo para copiar para tus atajos.
Preguntas frecuentes
¿Cuál es el keyCode de la tecla Flecha arriba?
38. Aunque está obsoleto: usa event.key (“ArrowUp”) o event.code (ArrowUp) en código nuevo.
¿Cuál es la diferencia entre event.key y event.code?
event.key es el carácter o la acción que produce la tecla con la distribución actual; event.code es la posición física de la tecla, igual en cualquier distribución.
¿Debo usar keydown o keypress?
keydown. El evento keypress está obsoleto y no se activa con teclas que no producen caracteres, como Escape o las flechas.