Qual código de chave da chave de escape com o jQuery

Eu tenho duas funções. Quando enter é pressionado, as funções são executadas corretamente, mas quando escape é pressionado, não. 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)
});

Tente com o evento keyup :

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

Em vez de codificar os valores do código-chave em sua função, considere usar constantes nomeadas para transmitir melhor o 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, inseguros de outros) definem um KeyEventobjeto global que expõe esses tipos de constantes para você. Essa pergunta do SO mostra uma boa maneira de definir esse objeto em outros navegadores também.

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

Você precisa usar em keyupvez de keypress. por exemplo:

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

keypressparece não ser tratado de maneira consistente entre navegadores (experimente a demonstração em http://api.jquery.com/keypress no IE x Chrome x Firefox. Às vezes, keypressnão é registrado e os valores para 'what' e ' keyCode 'variam) enquanto keyupé consistente.

Como houve uma discussão sobre e.whichvs e.keyCode: observe que esse e.whiché o valor normalizado por jquery e é o recomendado para uso:

A propriedade event.which normaliza event.keyCode e event.charCode. Recomenda-se assistir a event.which para inserir as teclas do teclado.

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

Para encontrar o código de tecla para qualquer tecla, use esta função simples:

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

27é o código para a chave de escape. :)

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

Sumário

• whiché mais preferível do que keyCodeporque é normalizado
• keyupé mais preferível do que keydownporque o pressionamento de tecla pode ocorrer várias vezes se o usuário mantiver pressionado.
• Não use keypress menos que queira capturar caracteres reais.

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

Snippet relacionado do JQuery doc

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

Outro item de interesse: JavaScript Keypress Library

Experimente o plugin jEscape (faça o download no Google Drive )

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

ou obtenha um código de chave para vários navegadores

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

talvez você possa usar o switch

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

Seu código funciona muito bem. Provavelmente a janela não está focada. Uso uma função semelhante para fechar caixas 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 isso estava me incomodando. No firefox, parece que se você tentar fazer algumas coisas quando a tecla Escape for pressionada, ela continuará processando a tecla Escape, que cancelará o que você estava tentando fazer. Alerta funciona bem. Mas no meu caso, eu queria voltar na história que não funcionou. Finalmente descobri que eu tinha que forçar a propagação do evento a 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);
}

Explicar onde outras respostas não foram; o problema é o seu uso keypress.

Talvez o evento tenha apenas um nome errado, mas keypressesteja definido para disparar quando . Ou seja, texto. Enquanto o que você quer é / , que é acionado sempre (antes ou depois, respectivamente)when an actualcharacteris being inserted
keydownkeyupthe user depresses akey . 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 é acionado keypress.
enteré estranho, porque mesmo que você o esteja usando como um caractere de controle (ou seja, para controlar a interface do usuário), ele ainda está inserindo um caractere de nova linha, que será acionado keypress.

Fonte: quirksmode

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

Apenas postando uma resposta atualizada que e.keyCodeé considerada DEPRECATED no MDN .

Em vez disso, você deve optar pelo e.keyque suporta nomes limpos para tudo. Aqui está a pasta de 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);

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

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

hotkeys('enter,esc', function(event,handler){
    switch(handler.key){
        case "enter":$('.save').click();break;
        case "esc":$('.cancel').click();break;
    }
});

teclas compreende os seguintes modificadores de: ⇧, shiftoption⌥altctrlcontrolcommand, e ⌘.

As seguintes teclas especiais podem ser usados para atalhos: backspacetab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, deletee f1através f19.

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

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

$.ui.keyCode.ESCAPE

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