Tasti freccia vincolanti in JS / jQuery

Come posso associare una funzione ai tasti freccia sinistra e destra in Javascript e / o jQuery? Ho guardato il plugin js-hotkey per jQuery (racchiude la funzione di bind integrata per aggiungere un argomento per riconoscere tasti specifici), ma non sembra supportare i tasti freccia.

document.onkeydown = function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
};

Se è necessario supportare IE8, avviare il corpo della funzione come e = e || window.event; switch(e.which || e.keyCode) {.

(modifica 2020)
Nota che KeyboardEvent.whichora è deprecato. Vedi questo esempio usandoKeyboardEvent.key per una soluzione più moderna per rilevare i tasti freccia.

$(document).keydown(function(e){
    if (e.which == 37) { 
       alert("left pressed");
       return false;
    }
});

Codici carattere:

37 - sinistra

38 - su

39 - giusto

40 - giù

È possibile utilizzare il keyCode dei tasti freccia (37, 38, 39 e 40 per sinistra, su, destra e giù):

$('.selector').keydown(function (e) {
  var arrow = { left: 37, up: 38, right: 39, down: 40 };

  switch (e.which) {
    case arrow.left:
      //..
      break;
    case arrow.up:
      //..
      break;
    case arrow.right:
      //..
      break;
    case arrow.down:
      //..
      break;
  }
});

Controlla qui l' esempio sopra .

Questo è un po 'in ritardo, ma HotKeys ha un bug molto grave che causa l'esecuzione di eventi più volte se si collega più di un tasto di scelta rapida a un elemento. Usa semplicemente jQuery.

$(element).keydown(function(ev) {
    if(ev.which == $.ui.keyCode.DOWN) {
        // your code
        ev.preventDefault();
    }
});

Ho semplicemente combinato i bit migliori delle altre risposte:

$(document).keydown(function(e){
    switch(e.which) {
        case $.ui.keyCode.LEFT:
        // your code here
        break;

        case $.ui.keyCode.UP:
        // your code here
        break;

        case $.ui.keyCode.RIGHT:
        // your code here
        break;

        case $.ui.keyCode.DOWN:
        // your code here
        break;

        default: return; // allow other keys to be handled
    }

    // prevent default action (eg. page moving up/down)
    // but consider accessibility (eg. user may want to use keys to choose a radio button)
    e.preventDefault();
});

Puoi usare KeyboardJS. Ho scritto la libreria per attività come questa.

KeyboardJS.on('up', function() { console.log('up'); });
KeyboardJS.on('down', function() { console.log('down'); });
KeyboardJS.on('left', function() { console.log('right'); });
KeyboardJS.on('right', function() { console.log('left'); });

Dai un'occhiata alla libreria qui => http://robertwhurst.github.com/KeyboardJS/

Una soluzione concisa che utilizza Javascript semplice (grazie a Sygmoral per i miglioramenti suggeriti):

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            alert('left');
            break;
        case 39:
            alert('right');
            break;
    }
};

Vedi anche https://stackoverflow.com/a/17929007/1397061 .

Sei sicuro che jQuery.HotKeys non supporti i tasti freccia? Ho fatto un casino con la loro demo prima e ho osservato che funzionava a sinistra, a destra, su e giù quando l'ho testato in IE7, Firefox 3.5.2 e Google Chrome 2.0.172 ...

EDIT : sembra che jquery.hotkeys sia stato trasferito su Github: https://github.com/jeresig/jquery.hotkeys

Invece di usare return false;come negli esempi sopra, puoi usare quello e.preventDefault();che fa lo stesso ma è più facile da capire e leggere.

Esempio di puro js con andare a destra o a sinistra

        window.addEventListener('keydown', function (e) {
            // go to the right
            if (e.keyCode == 39) {

            }
            // go to the left
            if (e.keyCode == 37) {

            }
        });

Puoi usare jQuery bind:

$(window).bind('keydown', function(e){
    if (e.keyCode == 37) {
        console.log('left');
    } else if (e.keyCode == 38) {
        console.log('up');
    } else if (e.keyCode == 39) {
        console.log('right');
    } else if (e.keyCode == 40) {
        console.log('down');
    }
});

Puoi controllare se arrow keyviene premuto un:

$(document).keydown(function(e){
    if (e.keyCode > 36 && e.keyCode < 41) { 
       alert( "arrowkey pressed" );
       return false;
    }
});

impedisce la freccia disponibile solo per qualsiasi altro oggetto SELEZIONA, beh in realtà non ho tes su un altro oggetto LOL. ma può interrompere l'evento freccia sulla pagina e sul tipo di input.

cerco già di bloccare la freccia sinistra e destra per modificare il valore dell'oggetto SELECT usando "e.preventDefault ()" o "return false" nell'evento "keypress" "keydown" e "keyup" ma cambia comunque il valore dell'oggetto. ma l'evento ti dice ancora che la freccia è stata premuta.

Una robusta libreria Javascript per acquisire input da tastiera e combinazioni di tasti immessi. Non ha dipendenze.

http://jaywcjlove.github.io/hotkeys/

hotkeys('right,left,up,down', function(e, handler){
    switch(handler.key){
        case "right":console.log('right');break
        case "left":console.log('left');break
        case "up":console.log('up');break
        case "down":console.log('down');break
    }
});

Sono venuto qui alla ricerca di un modo semplice per consentire all'utente, quando focalizzato su un input, utilizzare i tasti freccia per +1 o -1 un input numerico. Non ho mai trovato una buona risposta, ma ho reso il seguente codice che sembra funzionare alla grande, rendendo questo sito adesso.

$("input").bind('keydown', function (e) {
    if(e.keyCode == 40 && $.isNumeric($(this).val()) ) {
        $(this).val(parseFloat($(this).val())-1.0);
    } else if(e.keyCode == 38  && $.isNumeric($(this).val()) ) { 
        $(this).val(parseFloat($(this).val())+1.0);
    }
}); 

Con caffè e jquery

  $(document).on 'keydown', (e) ->
    switch e.which
      when 37 then console.log('left key')
      when 38 then console.log('up key')
      when 39 then console.log('right key')
      when 40 then console.log('down key')
    e.preventDefault()