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

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

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

Coloque seu código personalizado para as teclas de seta entre o case correspondente e as linhas de break .

e.which é normalizado pelo jQuery, então funciona em todos os navegadores. Para uma abordagem de javascript pura, substitua as duas primeiras linhas por:

 document.onkeydown = function(e) { e = e || window.event; switch(e.which || e.keyCode) { 

(editar 2017)
Se você se sentir chique, você pode usar e.key vez de e.which ou e.keyCode agora. e.key está se tornando um padrão recomendado, permitindo verificar contra strings: 'ArrowLeft' , 'ArrowUp' , 'ArrowRight' , 'ArrowDown' . Novos navegadores suportam nativamente, confira aqui .

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

Códigos de caracteres:

37 – esquerda

38-up

39 – direita

40 – para baixo

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

 $('.selector').keydown(function (e) { var keyCode = e.keyCode || e.which, arrow = {left: 37, up: 38, right: 39, down: 40 }; switch (keyCode) { case arrow.left: //.. break; case arrow.up: //.. break; case arrow.right: //.. break; case arrow.down: //.. break; } }); 

Veja o exemplo acima aqui .

Isso é um pouco tarde, mas o HotKeys tem um bug muito importante que faz com que os events sejam executados várias vezes se você append mais de uma tecla de atalho a um elemento. Apenas use jQuery simples.

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

Eu simplesmente combinei as melhores partes 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'); }); 

Confira a biblioteca aqui => http://robertwhurst.github.com/KeyboardJS/

Uma solução concisa usando Javascript simples (graças ao Sygmoral para melhorias sugeridas):

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

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

Tem certeza de que o jQuery.HotKeys não suporta as teclas de seta? Eu já mexi com o demo deles antes e observei o lado esquerdo, o de cima, o de cima e o de baixo quando eu testei no IE7, no Firefox 3.5.2 e no Google Chrome 2.0.172 …

EDIT : parece jquery.hotkeys foi transferido para o Github: https://github.com/jeresig/jquery.hotkeys

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

Exemplo de js puro com indo para a direita ou para 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 bind do jQuery:

 $(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 uma arrow key é pressionada por:

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

Impeça a seta somente disponível para qualquer outro object SELECT, bem na verdade eu não tenho tes em outro object LOL. mas pode parar o evento de seta na página e o tipo de input.

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

Uma robusta biblioteca Javascript para capturar inputs de teclado e combinações de teclas digitadas. Não tem dependencies.

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 deixar o usuário, quando focado em uma input, usar as teclas de seta para +1 ou -1 para uma input numérica. Eu nunca encontrei uma boa resposta, mas fiz o seguinte código que parece funcionar muito bem – fazendo deste site todo 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()