tastetrykk - Oppdage tastetrykk på piltaster i JavaScript

Hvordan kan jeg oppdage når en av piltastene trykkes? Jeg brukte dette for å finne ut:

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

Selv om det fungerte for alle andre taster, gjorde det det ikke for piltastene (kanskje fordi nettleseren skal rulle med disse tastene som standard).

Svar #1

Piltastene utløses bare av onkeydown, ikke onkeypress.

Tastkodene er:

  • venstre=37
  • opp=38
  • høyre=39
  • ned=40

Svar #2

event.key === "ArrowRight"...

Mer nylig og mye renere: bruk event.key. Ikke flere vilkårlige tallkoder! Hvis du transpilerer eller vet at brukerne dine alle bruker moderne nettlesere, bruk dette!

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

Detaljert håndtering:

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

Moderne bryterhåndtering:

const callback = {
    "ArrowLeft"  : leftHandler,
    "ArrowRight" : rightHandler,
    "ArrowUp"    : upHandler,
    "ArrowDown"  : downHandler,
}[event.key]
callback?.()

MERK: De gamle egenskapene (.keyCode og .which) er foreldet.

"w", "a", "s", "d" for retning, bruk event.code

For å støtte brukere som bruker ikke-qwerty/engelske tastaturoppsett, bør du i stedet bruke event.code. Dette vil bevare den fysiske tastenes plassering, selv om det resulterende tegnet endres.

event.key ville være , på Dvorak og z på Azerty, noe som gjør spillet ditt uspillbart.

const {code} = event
if (code === "KeyW") // KeyA, KeyS, KeyD

Optimalt sett lar du også tastendefinering, noe som gagner spilleren uavhengig av deres situasjon.

P.S. event.code er det samme for piler

tast Mozilla Docs

kode Mozilla Docs

Støttede nettlesere

Svar #3

Kall funksjon ved tast opp og ned. Det er forskjellige koder for hver tast.

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
    }

}

Svar #4

Muligens den korteste formuleringen:

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 (takk til brukeren Angus Grant): http://jsfiddle.net/angusgrant/E3tE6/

Dette bør fungere på tvers av nettlesere. Legg igjen en kommentar hvis det er en nettleser der det ikke fungerer.

Det finnes andre måter å få nøkkelkoden på (e.which, e.charCode, og window.event i stedet for e), men de burde ikke være nødvendige. Du kan prøve de fleste av dem på http://www.asquare.net/javascript/tests/KeyCode.html. Merk at event.keycode ikke fungerer med onkeypress i Firefox, men det fungerer med onkeydown.

Svar #5

Bruk keydown, ikke keypress for ikke-trykkbare taster som piltaster:

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

document.onkeydown = checkKey;

Den beste referansen for JavaScript-tastaturhendelser jeg har funnet (som slår quirksmode, for eksempel) er her: http://unixpapa.com/js/key.html

Svar #6

Moderne svar siden keyCode nå er utdatert til fordel for 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
    }
};

Svar #7

Jeg tror den nyeste metoden ville væ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;
  }
});

Dette forutsetter at utvikleren ønsker at koden skal være aktiv hvor som helst på siden, og at klienten skal ignorere andre tastetrykk. Fjern linjen event.preventDefault(); hvis tastetrykk, inkludert de som fanges av denne handleren, fortsatt skal være aktive.

Relaterte artikler