Come posso rilevare quando viene premuto uno dei tasti freccia? L'ho usato per scoprire:

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

Sebbene funzionasse per ogni altro tasto, non per i tasti freccia (forse perché il browser dovrebbe scorrere su questi tasti per impostazione predefinita).

I tasti freccia sono attivati ​​solo da onkeydown, non onkeypress.

I codici chiave sono:

• sinistra = 37
• su = 38
• destra = 39
• giù = 40

Tasto su su e giù per la funzione di chiamata. Esistono codici diversi per ogni chiave.

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

Più recente e molto più pulito: usare event.key. Niente più codici numerici arbitrari! Se stai eseguendo la transpiling o sai che i tuoi utenti utilizzano tutti i browser moderni, usa questo!

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

Gestione dettagliata:

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

Puoi facilmente estenderlo per verificare "w", "a", "s", "d"o qualsiasi altra chiave

Mozilla Docs

Browser supportati

PS event.codeè lo stesso per le frecce

Forse la formulazione più testata:

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 (grazie all'utente Angus Grant): http://jsfiddle.net/angusgrant/E3tE6/

Questo dovrebbe funzionare su più browser. Lascia un commento se c'è un browser in cui non funziona.

Esistono altri modi per ottenere il codice chiave (e.which, e.charCode e window.event anziché e), ma non dovrebbero essere necessari. Puoi provarne la maggior parte su http://www.asquare.net/javascript/tests/KeyCode.html . Nota che event.keycode non funziona con onkeypress in Firefox, ma funziona con onkeydown.

Utilizzare keydown, non keypressper i tasti non stampabili come i tasti freccia:

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

document.onkeydown = checkKey;

Il miglior riferimento all'evento chiave JavaScript che ho trovato (battendo i pantaloni dalla modalità quirks, per esempio) è qui: http://unixpapa.com/js/key.html

Risposta moderna poiché keyCode è ora deprecato a favore della chiave :

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

Credo che il metodo più recente sarebbe:

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

Ciò presuppone che lo sviluppatore desideri che il codice sia attivo in qualsiasi punto della pagina e che il client dovrebbe ignorare qualsiasi altra pressione dei tasti. Elimina event.preventDefault (); linea se i tasti premuti, compresi quelli catturati da questo gestore, devono essere ancora attivi.

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;

Ecco un esempio di implementazione:

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

Ecco come l'ho fatto:

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

Sono stato in grado di intrappolarli con jQuery:

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

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

Questo è il codice di lavoro per Chrome e 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>

Stavo anche cercando questa risposta fino a quando non mi sono imbattuto in questo post.

Ho trovato un'altra soluzione per conoscere il codice chiave delle diverse chiavi, per gentile concessione del mio problema. Volevo solo condividere la mia soluzione.

Basta usare l'evento keyup / keydown per scrivere il valore nella console / avvisare lo stesso usando event.keyCode. piace-

console.log(event.keyCode) 

// or

alert(event.keyCode)

- rupam

Questo è più breve.

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

Questa biblioteca oscilla! https://craig.is/killing/mice

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

Tuttavia, è necessario premere la sequenza un po 'velocemente per evidenziare il codice in quella pagina.

Re risposte che avete bisogno di keydownnonkeypress .

Supponendo che tu voglia spostare qualcosa continuamente mentre il tasto è premuto, trovo che funzioni keydownper tutti i browser tranne Opera. Per Opera, keydownsi attiva solo alla prima pressione. Per utilizzare Opera:

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

I tasti freccia vengono attivati ​​al keyup

$(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 consente ctrl, alt, merda

onkeyup consente tab, frecce su, frecce giù, frecce sinistra, frecce giù

Se usi jquery, puoi anche fare così,

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

controlla i codici chiave %=37e &=38... e solo i tasti freccia sinistra = 37 su = 38

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

Se vuoi rilevare i tasti freccia premuti ma non hai bisogno di specifici in Javascript

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

Con chiave ed ES6.

Questo ti dà una funzione separata per ogni tasto freccia senza usare switch e funziona anche con i tasti 2,4,6,8 nel tastierino numerico quando NumLockè attivo .

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>