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

559

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)
});
Shishant
fonte
Pressionar tecla retornará um caractere conectado a uma tecla (em maiúsculas corretas, etc.); Keyup retornará o número de botão de hardware pressionado. Para ESC você iria querer o código de hardware 27 (não o caráter ascii 27)
Joeri
Existe um truque muito simples para descobrir qual código chave você deseja. Basta abrir uma nova guia, colocar document.addEventListener("keydown", e => console.log(e.keyCode))no console do navegador, clicar na janela e pressionar a tecla que você está procurando.
anarchist912

Respostas:

926

Tente com o evento keyup :

$(document).keyup(function(e) {
  if (e.keyCode === 13) $('.save').click();     // enter
  if (e.keyCode === 27) $('.cancel').click();   // esc
});
CMS
fonte
39
Isso não tem nada a ver com keyup vs. keypress. Para capturar ESCAPE, é necessário olhar e.keyCode, em vez de e.which (o que este exemplo faz).
Dkamins
211
"Isso não tem nada a ver com keyup vs. keypress" - isso está incorreto, dkamins. o keypress não parece ser tratado de maneira consistente entre os navegadores (experimente a demonstração em api.jquery.com/keypress no IE x Chrome x Firefox - às vezes, ele não se registra e os códigos 'what' e 'keyCode' variam) enquanto o keyup é consistente. e. qual é o valor normalizado por jquery, então 'what' ou 'keyCode' deve funcionar em keyup.
Jordan Brough
13
@ Jordan Brough - Eu gostaria de solicitar que você publique seu comentário como resposta, para que as pessoas o leiam e entendam o real significado do seu comentário! desde que o seu comentário é tão importante quanto a resposta explicando
Murtaza
15
keydownimitará o comportamento nativo - pelo menos no Windows, onde pressionar ESC ou Return em uma caixa de diálogo acionará a ação antes que a tecla seja liberada.
Thomthom 31/10/12
2
@gibberish Eu adicionei o meu comentário como uma resposta aqui: stackoverflow.com/a/28502629/58876
Jordan Brough
77

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.

Seth Petry-Johnson
fonte
15
O que, 27 não é apenas a chave de escape?!? Honestamente, isso realmente precisa ser feito por mais pessoas. Eu os chamo de "números mágicos" e "cordas mágicas". O que significa 72? Por que você tem uma sequência de caracteres muito específica e volátil copiada e colada 300 vezes em sua base de código? etc.
vbullinger 13/08/2012
1
Ou você pode simplesmente adicionar um comentário acima de cada um, pois provavelmente só os usará uma vez. IMO da mesma forma que legível
Ivan Durst
8
@IvanDurst, você pode usá-los apenas uma vez por método , mas eu os uso várias vezes nos meus projetos. Você está realmente sugerindo que deseja (1) pesquisar os valores e (2) comentá-los sempre que quiser usar um código-chave? Não sei sobre você, mas não tenho o desejo de memorizá-los nem a fé de que outros programadores os comentarão de forma consistente. Trata-se de tornar a codificação mais fácil e consistente, não apenas mais legível.
Seth Petry-Johnson
2
Alguém que sabe o que eles querem dizer não precisa procurar o significado para comentá-los, e digitar um comentário é tão rápido quanto digitar um nome longo.
NetMage
6
O que aconteceu com os bons velhos tempos, quando costumávamos codificar constantes de caracteres em hexadecimal? Todo mundo sabe que ESC é 0x1Be Enter é 0x0D, certo?
precisa
42

(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/ )

Jordan Brough
fonte
5
Também gostaria de acrescentar aqui que os navegadores que não disparam keypressna fuga estão fazendo o certo. keypressdestina-se a disparar apenas quando a chave produz um caractere, enquanto keyupdispara sempre. developer.mozilla.org/pt-BR/docs/Web/Events/keypress
ohcibi
26

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

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

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

Salgado
fonte
1
Eu tenho duas funções quando enter é pressionar, as funções são executadas corretamente, mas não com a tecla Escape. $ (Document) .keypress (function (e) {if (e.which == 13) {$ ('. Save'). Click ();} if (e.que == 27) {$ ('. cancel'). click ();}});
Shishant
$ (documento) .keypress (função (e) {y = e.keyCode? e.keyCode: e.which;}); Quando eu alerta (y), ele alerta 27 no IE e FF. Tem certeza de que não há mais nada de errado com seu código?
Salgado
14

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

Shital Shah
fonte
10

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;
}
S. Ferit Arslan
fonte
8

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

});
Eric Herlitz
fonte
8

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);
}
Billy Buerger
fonte
8

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

Hashbrown
fonte
1
Parabéns por ler as especificações! Esta deve ser a resposta aceita com certeza :)
DylanYoung
7

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

Julien
fonte
2
Eu diria ..... Odeio que este site esteja no topo dos resultados da pesquisa porque é muito feio, mas transmite as informações necessárias.
MJ
1
Observe que, dependendo do evento e do navegador, os códigos de chave nem sempre correspondem às tabelas ascii.
Alan H.
2
downvote: não responder à pergunta, nem sequer abordar a questão, hex não tem nada a ver com a questão e OP conhecimento já demonstrou de esc == 27.
Jeremy
7

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);
agosto
fonte
3
Mas parece ser suportado apenas no Firefox e Chrome.
Gayan Weerakutti
Aqui está uma longa lista de valores-chave .
Bob Stein
Infelizmente, pelo menos algumas versões do Internet Explorer passam o código Escem vez do padrão Escape.
Robin Stewart
6

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: , shiftoptionaltctrlcontrolcommand, 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.

小弟 调 调
fonte
5

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

Dalius I
fonte