Qual código para chave de escape com jQuery

Eu tenho duas funções. Quando enter é pressionado, as funções são executadas corretamente, mas quando o escape é pressionado, não funciona. Qual é o número correto para a chave de escape?

$(document).keypress(function(e) { if (e.which == 13) $('.save').click(); // enter (works as expected) if (e.which == 27) $('.cancel').click(); // esc (does not work) }); 

   

Experimente com o evento de chave :

 $(document).keyup(function(e) { if (e.keyCode === 13) $('.save').click(); // enter if (e.keyCode === 27) $('.cancel').click(); // esc }); 

Em vez de codificar os valores de códigos de tecla em sua function, considere o uso de constantes nomeadas para melhor transmitir seu significado:

 var KEYCODE_ENTER = 13; var KEYCODE_ESC = 27; $(document).keyup(function(e) { if (e.keyCode == KEYCODE_ENTER) $('.save').click(); if (e.keyCode == KEYCODE_ESC) $('.cancel').click(); }); 

Alguns navegadores (como o FireFox, inseguro de outros) definem um object global KeyEvent que expõe esses tipos de constantes para você. Essa pergunta SO mostra uma boa maneira de definir esse object em outros navegadores também.

(Resposta extraída do meu comentário anterior )

Você precisa usar keyup vez de keypress . por exemplo:

 $(document).keyup(function(e) { if (e.which == 13) $('.save').click(); // enter if (e.which == 27) $('.cancel').click(); // esc }); 

keypress não parece ser tratado de forma consistente entre os navegadores (experimente a demonstração em http://api.jquery.com/keypress no IE vs Chrome vs Firefox. Às vezes, o keypress não se registra, e os valores para ambos ‘which’ e ‘keyCode’ variam) enquanto que a chave é consistente.

Já que houve alguma discussão de e.which vs e.keyCode : Observe que e.which é o valor normalizado por jquery e é o recomendado para uso:

O event.which propriedade normaliza event.keyCode e event.charCode. Recomenda-se para assistir event.which para input de tecla do teclado.

(de http://api.jquery.com/event.which/ )

Para encontrar o código-chave de qualquer chave, use esta function simples:

 document.onkeydown = function(evt) { console.log(evt.keyCode); } 

27 é o código da chave de escape. 🙂

Experimente o plugin jEscape ( download do google drive )

 $(document).escape(function() { alert('ESC button pressed'); }); 

ou obter o código-chave para o navegador cruzado

 var code = (e.keyCode ? e.keyCode : e.which); if (code === 27) alert('ESC'); if (code === 13) alert('ENTER'); 

talvez você possa usar o interruptor

 var code = (e.keyCode ? e.keyCode : e.which); switch (code) { case 27: alert('ESC'); break; case 13: alert('ENTER'); break; } 

Sua melhor aposta é

 $(document).keyup(function(e) { if (e.which === 13) $('.save').click(); // enter if (e.which === 27) $('.cancel').click(); // esc /* OPTIONAL: Only if you want other elements to ignore event */ e.preventDefault(); e.stopPropagation(); }); 

Resumo

  • which é mais preferível que keyCode porque é normalizado
  • keyup é mais preferível do que keydown porque o keydown pode ocorrer várias vezes se o usuário o mantiver pressionado.
  • Não use o keypress menos que você queira capturar caracteres reais.

Curiosamente Bootstrap usa keydown e keyCode em seu componente suspenso (a partir de 3.0.2)! Eu acho que é provavelmente uma má escolha lá.

Snippet relacionado do doc do JQuery

Enquanto os navegadores usam propriedades diferentes para armazenar essas informações, o jQuery normaliza a propriedade .which para que você possa usá-la de forma confiável para recuperar o código da chave. Esse código corresponde a uma tecla no teclado, incluindo códigos para teclas especiais, como setas. Para capturar a input de texto real, .keypress () pode ser uma escolha melhor.

Outro ponto de interesse: JavaScript Keypress Library

Para obter o código hexadecimal para todos os personagens: http://asciitable.com/

Seu código funciona bem. É mais provável que a janela não esteja focada. Eu uso uma function semelhante para fechar checkboxs de iframe etc.

 $(document).ready(function(){ // Set focus setTimeout('window.focus()',1000); }); $(document).keypress(function(e) { // Enable esc if (e.keyCode == 27) { parent.document.getElementById('iframediv').style.display='none'; parent.document.getElementById('iframe').src='/views/view.empty.black.html'; } }); 

Eu estava tentando fazer a mesma coisa e estava me incomodando. No firefox, parece que se você tentar fazer algumas coisas quando a tecla de escape é pressionada, ela continua processando a tecla de escape que então cancela o que você estava tentando fazer. Alerta funciona bem. Mas no meu caso, eu queria voltar na história que não funcionou. Finalmente percebi que eu tive que forçar a propagação do evento para parar como mostrado abaixo …

 if (keyCode == 27) { history.back(); if (window.event) { // IE works fine anyways so this isn't really needed e.cancelBubble = true; e.returnValue = false; } else if (e.stopPropagation) { // In firefox, this is what keeps the escape key from canceling the history.back() e.stopPropagation(); e.preventDefault(); } return (false); } 

Para explicar onde outras respostas não têm; O problema é o uso de keypress .

Talvez o evento seja apenas um nome keypress mas o keypress é definido para triggersr when an actual character when an actual is being inserted . Ou seja, texto.
Considerando que o que você quer é keydown / keyup , que triggers sempre que (antes ou depois, respectivamente) the user depresses a key . Ou seja, essas coisas no teclado.

A diferença aparece aqui porque esc é um caractere de controle (literalmente ‘ caractere não imprimível’) e, portanto, não escreve nenhum texto, portanto, nem mesmo triggers o keypress .
enter é estranho, porque mesmo que você o esteja usando como um caractere de controle (isto é, para controlar a interface do usuário), ele ainda está inserindo um caractere de nova linha, que irá triggersr a keypress .

Fonte: quirksmode

Eu sempre usei keyup e e.which para pegar a chave de escape.

Eu sei que esta pergunta está perguntando sobre jquery, mas para aquelas pessoas que usam jqueryui, há constantes para muitos dos códigos de tecla:

 $.ui.keyCode.ESCAPE 

http://api.jqueryui.com/jQuery.ui.keyCode/

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('enter,esc', function(event,handler){ switch(handler.key){ case "enter":$('.save').click();break; case "esc":$('.cancel').click();break; } }); 

hotkeys entende os seguintes modificadores: , opção de mudança comando de controle alt ctrl e .

As seguintes teclas especiais podem ser usadas para atalhos: guia de retrocesso , limpar , inserir , retornar , esc , escape , espaço , cima , baixo , esquerda , direita , home , final , pageup , pagedown , del , delete e f1 a f19 .

Apenas postar uma resposta atualizada que e.keyCode é considerado e.keyCode no MDN .

Em vez disso, você deve optar por e.key que suporta nomes limpos para tudo. Aqui está a cópia relevante

 window.addEventListener("keydown", function (event) { if (event.defaultPrevented) { return; // Do nothing if the event was already processed } switch (event.key) { case "ArrowDown": // Do something for "down arrow" key press. break; case "ArrowUp": // Do something for "up arrow" key press. break; case "ArrowLeft": // Do something for "left arrow" key press. break; case "ArrowRight": // Do something for "right arrow" key press. break; case "Enter": // Do something for "enter" or "return" key press. break; case "Escape": // Do something for "esc" key press. break; default: return; // Quit when this doesn't handle the key event. } // Cancel the default action to avoid it being handled twice event.preventDefault(); }, true);