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

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

Obwohl es für jede andere Taste funktionierte, funktionierte es nicht für Pfeiltasten (möglicherweise, weil der Browser standardmäßig auf diesen Tasten scrollen soll).

Pfeiltasten werden nur von ausgelöst onkeydown, nicht von onkeypress.

Die Schlüsselcodes sind:

• links = 37
• up = 38
• rechts = 39
• unten = 40

On-Key-Up- und Down-Call-Funktion. Für jeden Schlüssel gibt es unterschiedliche Codes.

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

Neuere und viel sauberere: verwenden event.key. Keine willkürlichen Nummerncodes mehr! Wenn Sie transpilieren oder wissen, dass Ihre Benutzer alle moderne Browser verwenden, verwenden Sie diese Option!

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

Ausführliche Behandlung:

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

Sie können dies leicht erweitern, um nach "w", "a", "s", "d"einem anderen Schlüssel zu suchen

Mozilla Docs

Unterstützte Browser

PS event.codeist das gleiche für Pfeile

Möglicherweise die knappste Formulierung:

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

Demo (danke an Benutzer Angus Grant): http://jsfiddle.net/angusgrant/E3tE6/

Dies sollte browserübergreifend funktionieren. Hinterlasse einen Kommentar, wenn es einen Browser gibt, in dem er nicht funktioniert.

Es gibt andere Möglichkeiten, den Schlüsselcode abzurufen (e.which, e.charCode und window.event anstelle von e), diese sollten jedoch nicht erforderlich sein. Sie können die meisten davon unter http://www.asquare.net/javascript/tests/KeyCode.html ausprobieren . Beachten Sie, dass event.keycode in Firefox nicht mit onkeypress funktioniert, aber mit onkeydown.

Verwenden Sie diese Option keydownnicht keypressfür nicht druckbare Tasten wie Pfeiltasten:

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

document.onkeydown = checkKey;

Die beste JavaScript-Schlüsselereignisreferenz, die ich gefunden habe (z. B. den Quirksmode in den Griff bekommen), ist hier: http://unixpapa.com/js/key.html

Moderne Antwort, da keyCode jetzt zugunsten von key veraltet ist :

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

Ich glaube, die neueste Methode wäre:

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 an einer beliebigen Stelle auf der Seite aktiv ist, und dass der Client alle anderen Tastendrücke ignoriert. Beseitigen Sie das event.preventDefault (); Zeile, wenn Tastendrücke, einschließlich der von diesem Handler abgefangenen, noch aktiv sein sollten.

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;

Hier ist eine Beispielimplementierung:

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

So habe ich es 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.
}

Ich konnte sie mit jQuery fangen:

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

Ein Beispiel: http://jsfiddle.net/AjKjU/

Das ist der Arbeitscode für Chrome und 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>

Ich habe auch nach dieser Antwort gesucht, bis ich auf diesen Beitrag gestoßen bin.

Ich habe eine andere Lösung gefunden, um den Schlüsselcode der verschiedenen Schlüssel zu kennen, dank meines Problems. Ich wollte nur meine Lösung teilen.

Verwenden Sie einfach das Ereignis keyup / keydown, um den Wert in die Konsole zu schreiben event.keyCode. mögen-

console.log(event.keyCode) 

// or

alert(event.keyCode)

- Rupam

Das ist kürzer.

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

Diese Bibliothek rockt! https://craig.is/killing/mice

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

Sie müssen die Sequenz etwas schnell drücken, um den Code auf dieser Seite hervorzuheben.

Re Antworten, die Sie keydownnicht brauchen keypress.

Angenommen, Sie möchten etwas kontinuierlich bewegen, während die Taste gedrückt wird, keydownfunktioniert dies für alle Browser außer Opera. Für Opera wird keydownnur beim ersten Drücken ausgelöst. Um Opera zu verwenden, verwenden Sie:

document.onkeydown = checkKey;
document.onkeypress = checkKey;
function checkKey(e)
{ etc etc

Pfeiltasten werden beim Tastendruck ausgelöst

$(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 erlaubt Strg, Alt, Scheiße

onkeyup erlaubt Tab, Aufwärtspfeile, Abwärtspfeile, Linkspfeile, Abwärtspfeile

Wenn Sie jquery verwenden, können Sie dies auch so tun:

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

Steuern Sie die Tastencodes %=37und &=38... und nur noch die Pfeiltasten = 37 bis = 38

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

Wenn Sie Pfeiltasten erkennen möchten, diese aber in Javascript nicht spezifisch benötigen

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

Mit Schlüssel und ES6.

Dies gibt Ihnen eine separate Funktion für jede Pfeiltaste ohne Verwendung eines Schalters und funktioniert auch mit den 2,4,6,8-Tasten im Nummernblock, wenn diese aktiviert NumLocksind.

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>