¿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).

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

Los códigos clave son:

• izquierda = 37
• arriba = 38
• derecha = 39
• abajo = 40

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
    }

}

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

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.

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

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
    }
};

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.

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;

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);
  }
});

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.
}

He podido atraparlos con jQuery:

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

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

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>

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

Eso es mas corto.

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

¡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.

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

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

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');
    }
 });

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)); 
}

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
   };
}

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>