Erkennen von Pfeiltasten in JavaScript

458

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

mihsathe
quelle

Antworten:

733

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

Die Schlüsselcodes sind:

  • links = 37
  • up = 38
  • rechts = 39
  • unten = 40
Mark Kahn
quelle
15
Einige Browser lösen keypressEreignisse für Pfeiltasten aus, aber Sie haben Recht, dass dies keydownimmer für Pfeiltasten funktioniert.
Tim Down
4
Wenn Sie% drücken, erhalten Sie auch keyCode 37
xorcus
9
@xorcus - Nein, du bekommst 53mit einem keydownEvent. Sie bekommen 37mit keypress, was eine andere Sache ist
Mark Kahn
7
Was ist mit onkeyup?
1nfiniti
2
@ MrCroft - oder hören onkeyupund stoppen Sie das Ereignis dort. Realistisch gesehen sollten Sie das Verhalten der Benutzeroberfläche jedoch nicht mit Javascript ändern.
Mark Kahn
225

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
    }

}
Ketan
quelle
Was macht die zweite Zeile?
Eshellborn
16
Zur Verdeutlichung 'e || window.event 'bedeutet, dass wenn' e 'ein definierter Wert ist, dies das Ergebnis von' || 'ist. Ausdruck. Wenn 'e' nicht definiert ist, ist 'window.event' das Ergebnis von '||' Ausdruck. Es ist also im Grunde eine Abkürzung für: e = e ? e : window.event; Oder:if (typeof(e) === "undefined") { e = window.event; }
Michael Calvin
17
Damit funktioniert es in alten IE-Versionen (vor IE9), in denen das Ereignis nicht an die Handlerfunktion übergeben wurde.
Mark Rhodes
12
Nur um zu beachten, keyCode ist eine Zahl und === sollte idealerweise verwendet werden
alexrogers
11
@ketan der Punkt war, dass keyCode eine Zahl ist und wie keyCode === 32, nicht keyCode == '32'oder überprüft werden sollte keyCode === '32'.
Nenotlep
98

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

Gibolt
quelle
5
Vielen Dank für die Verwendung keyund nicht keyCode, das war veraltet.
v010dya
8
Hinweis von MDN: Internet Explorer, Edge (16 und früher) und Firefox (36 und früher) verwenden "Links", "Rechts", "Auf" und "Ab" anstelle von "ArrowLeft", "ArrowRight", "ArrowUp" "und" ArrowDown ".
Simon
95

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.

1 ''
quelle
3
Ich musste die Definition von knapp nachschlagen, dann postulierte ich (lebhaft), dass knapp eine unangemessene Konjugation sei; Leider gebe ich zu: Meine Besorgnis war widerlegbar .
Ashleedawg
20

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

Tim Down
quelle
16

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
    }
};
Joshua Fan
quelle
12

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.

lrhorer
quelle
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
quelle
1
Lohnt es sich nicht, arrsaußerhalb der Funktion zu setzen? Keine Notwendigkeit, es bei jedem Anruf neu zu erstellen
Trauer
8

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);
  }
});
RobPW
quelle
Ich var targetElement = typeof $0 !== 'undefined' ? $0 : document.body;var targetElement = document.body;
bekomme
7

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.
}
OneStig
quelle
5

Ich konnte sie mit jQuery fangen:

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

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

Albireo
quelle
4
keypressfunktioniert nicht mit Pfeiltasten. Sie müssen $(document).on('keydown', function() {...})stattdessen verwenden
Juribiyan
4

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>
Zeeshan Akhter
quelle
3

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

Rupam Datta
quelle
3

Das ist kürzer.

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

Andrey Vaganov
quelle
2
kurz ist gut:if ([37,38,39,40].indexOf(e.keyCode)!=-1){ console.log('arrow pressed') }
animaacija
3

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.

Fandi Susanto
quelle
2

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
Alan Finners
quelle
2

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

batMan007
quelle
1

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');
    }
 });
Kalyan Halder Raaz
quelle
0

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)); 
}
Juver Paredes
quelle
0

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
   };
}
KitKit
quelle
0

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>

Volt
quelle