Teclas de seta de ligação em JS / jQuery

Como faço para vincular uma função às teclas de seta esquerda e direita em Javascript e / ou jQuery? Eu olhei para o plugin js-hotkey para jQuery (envolve a função de ligação incorporada para adicionar um argumento para reconhecer chaves específicas), mas ele não parece suportar teclas de seta.

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 você precisar oferecer suporte ao IE8, inicie o corpo da função como e = e || window.event; switch(e.which || e.keyCode) {.

(editar 2020)
Observe que KeyboardEvent.whichagora está obsoleto. Veja este exemplo usandoKeyboardEvent.key uma solução mais moderna para detectar teclas de seta.

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

Códigos de caracteres:

37 - esquerda

38 - até

39 - direita

40 - abaixo

Você pode usar o keyCode das teclas de seta (37, 38, 39 e 40 para esquerda, cima, direita e baixo):

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

Veja o exemplo acima aqui .

É um pouco tarde, mas as Teclas de Atalho têm um bug muito importante que faz com que os eventos sejam executados várias vezes se você anexar mais de uma tecla de atalho a um elemento. Basta usar jQuery simples.

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

Simplesmente combinei os melhores bits das outras respostas:

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

Você pode usar o KeyboardJS. Eu escrevi a biblioteca para tarefas como esta.

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

Faça o checkout da biblioteca aqui => http://robertwhurst.github.com/KeyboardJS/

Uma solução concisa usando Javascript simples (obrigado a Sygmoral pelas melhorias sugeridas):

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

Consulte também https://stackoverflow.com/a/17929007/1397061 .

Tem certeza de que o jQuery.HotKeys não suporta as teclas de seta? Eu brinquei com a demo deles antes e observei o funcionamento esquerdo, direito, para cima e para baixo quando o testei no IE7, Firefox 3.5.2 e Google Chrome 2.0.172 ...

EDIT : Parece que o jquery.hotkeys foi realocado para o Github: https://github.com/jeresig/jquery.hotkeys

Em vez de usar return false;como nos exemplos acima, você pode usar o e.preventDefault();que faz o mesmo, mas é mais fácil de entender e ler.

Exemplo de js puro com a direita ou a esquerda

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

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

            }
        });

Você pode usar o 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');
    }
});

Você pode verificar se um arrow keyé pressionado por:

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

impedir seta disponível apenas para qualquer outro objeto SELECT, bem, na verdade eu não tenho tes em outro objeto LOL. mas pode parar o evento de seta na página e no tipo de entrada.

Eu já tento bloquear a seta para a esquerda e para a direita para alterar o valor do objeto SELECT usando "e.preventDefault ()" ou "return false" no evento "kepress" "keydown" e "keyup", mas ele ainda altera o valor do objeto. mas o evento ainda informa que a seta foi pressionada.

Uma robusta biblioteca Javascript para capturar as entradas do teclado e as combinações de teclas inseridas. Não possui dependências.

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

Eu vim aqui procurando uma maneira simples de permitir que o usuário, quando focado em uma entrada, use as teclas de seta para marcar com +1 ou -1 uma entrada numérica. Eu nunca encontrei uma boa resposta, mas criei o seguinte código que parece funcionar muito bem - tornando este site amplo agora.

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

Com café 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()