Chaves de seta do jQuery Keypress

Eu estou tentando capturar pressionamentos de tecla de seta no jQuery, mas nenhum evento está sendo acionado.

$(function(){ $('html').keypress(function(e){ console.log(e); }); }); 

Isso gera events para chaves alfanuméricas, mas exclui chaves de seta, etc. não gera evento.

O que estou fazendo de errado em não estar capturando esses?

Aqui está um exemplo: JSnippet DEMO keydown () vs keypress ()

Você deve usar .keydown() porque .keypress() irá ignorar “Arrows”, para capturar o tipo de chave use e.which

Pressione a canvas de resultados para focar (na parte inferior direita da canvas do violino) e pressione as teclas de seta para ver se funciona.

Notas:

  1. .keypress() nunca será triggersdo com Shift, Esc e Delete mas .keydown() irá.
  2. Na verdade, .keypress() em algum navegador será acionado por teclas de seta, mas não é cross-browser, então é mais confiável usar .keydown() .

Mais informação útil

  1. Você pode usar .keyCode Or .keyCode do object de evento – Alguns navegadores não suportam um deles, mas ao usar o jQuery, é seguro usar ambos, já que o jQuery padroniza as coisas. (Eu prefiro .which nunca teve um problema com).
  2. Para detectar um ctrl | alt | shift | META ctrl | alt | shift | META ctrl | alt | shift | META pressione com a chave real capturada você deve verificar as seguintes propriedades do object de evento – Eles serão configurados para TRUE se eles foram pressionados:
    • event.ctrlKey – ctrl
    • event.altKey – alt
    • event.shiftKey – shift
    • event.metaKey – META ( Comando ⌘ OU Chave do Windows )
  3. Finalmente – aqui estão alguns códigos-chave úteis (Para uma lista completa – keycode-cheatsheet ):

    • Digite: 13
    • Até: 38
    • Para baixo: 40
    • À direita: 39
    • Esquerda: 37
    • Esc: 27
    • Barra de espaço: 32
    • Ctrl: 17
    • Alt: 18
    • Mudança: 16
 $(document).keydown(function(e) { console.log(e.keyCode); }); 

Os events Keypress detectam as teclas de seta, mas não em todos os navegadores. Então é melhor usar o keydown.

Estes são os códigos de teclas que você deve obter em seu log de console:

  • esquerda = 37
  • up = 38
  • certo = 39
  • baixo = 40

Você pode verificar se uma tecla de seta é pressionada por:

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

demo jsfiddle

Por favor, consulte o link de JQuery

http://api.jquery.com/keypress/

Diz

O evento keypress é enviado para um elemento quando o navegador registra a input do teclado. Isso é semelhante ao evento keydown, exceto que as teclas modificadoras e não de impressão, como Shift, Esc e excluir events keydown do acionador, mas não keypress events. Outras diferenças entre os dois events podem surgir dependendo da plataforma e do navegador.

Isso significa que você não pode usar o pressionamento de tecla no caso de setas.

 $(document).on( "keydown", keyPressed); function keyPressed (e){ e = e || window.e; var newchar = e.which || e.keyCode; alert(newchar) } 
 left = 37,up = 38, right = 39,down = 40 $(document).keydown(function(e) { switch(e.which) { case 37: $( "#prev" ).click(); break; case 38: $( "#prev" ).click(); break; case 39: $( "#next" ).click(); break; case 40: $( "#next" ).click(); break; default: return; } e.preventDefault(); 

});