Erkennung von Pfeiltastendrücken in JavaScript

Question

Wie erkenne ich, wenn eine der Pfeiltasten gedrückt wird? Ich habe das hier benutzt, um es herauszufinden:

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

Es funktionierte zwar bei allen anderen Tasten, aber nicht bei den Pfeiltasten (vielleicht weil der Browser standardmäßig auf diesen Tasten blättern soll).

Answer 1

Moderne Antwort seit keyCode ist jetzt veraltet zugunsten von Schlüssel :

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

Answer 2

Ich glaube, die jüngste Methode wäre die folgende:

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

Dies setzt voraus, dass der Entwickler möchte, dass der Code überall auf der Seite aktiv ist und der Client alle anderen Tastendrücke ignorieren soll. Eliminieren Sie die Zeile event.preventDefault();, wenn Tastendrücke, einschließlich derer, die von diesem Handler abgefangen werden, weiterhin aktiv sein sollen.

Answer 3

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;

Answer 4

Hier ist ein Beispiel für eine Implementierung:

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

Answer 5

Ich habe es folgendermaßen gemacht:

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