jQuery Event Keypress: Qual tecla foi pressionada?

706

Com o jQuery, como descubro qual tecla foi pressionada quando vinculo ao evento de pressionamento de tecla?

$('#searchbox input').bind('keypress', function(e) {});

Quero acionar um envio quando ENTERpressionado.

[Atualizar]

Mesmo que eu tenha encontrado a (ou melhor: uma) resposta para mim, parece haver algum espaço para variação;)

Existe uma diferença entre keyCodee which- especialmente se eu estou procurando ENTER, que nunca será uma chave unicode?

Alguns navegadores fornecem uma propriedade e outros fornecem a outra?

BlaM
fonte
295
** Se alguém chegou a esse ponto no Google (como eu fiz), saiba que "keyup" em vez de "keypress" funciona no Firefox, IE e Chrome. "keypress" aparentemente só funciona no Firefox.
Tyler
17
Além disso, "keydown" funciona melhor do que "keyup" para acionar um evento APÓS a tecla ter sido pressionada (obviamente), mas isso é importante se você quiser ativar um evento no segundo backspace se uma área de texto estiver vazia
Tyler
12
Quanto ao e.keyCode VS e.which ... Nos meus testes, Chrome e IE8: o manipulador keypress () será acionado apenas para caracteres normais (ou seja, não para Cima / Baixo / Ctrl), e para e.keyCode e e. que retornará o código ASCII. No Firefox, no entanto, todas as teclas acionam keypress (), MAS: para caracteres normais e.which retornará o código ASCII e e.keyCode retornará 0, e para caracteres especiais (por exemplo, Up / Down / Ctrl) e.keyCode retornará o código do teclado e e.que retornará 0. Que divertido.
25410 jackocnr
4
Aviso: NÃO use o código do Google. O autor do jquery enviou um patch, que está apenas no repositório do github (e no fork de John Resig): github.com/tzuryby/jquery.hotkeys . O código do google se comporta incorretamente ao vincular mais de um evento-chave ao mesmo nó dom. O novo resolve.
Daniel Ribeiro
4
"keyup" será acionado muito tarde quando você pressiona uma tecla por um longo tempo. Veja aqui jsbin.com/aquxit/3/edit tão keydown é o caminho a percorrer
Toskan

Respostas:

844

Na verdade, isso é melhor:

 var code = e.keyCode || e.which;
 if(code == 13) { //Enter keycode
   //Do something
 }
Eran Galperin
fonte
84
if ((e.keyCode || e.which) == 13)? ;)
Kezzer
49
De acordo com um comentário mais abaixo nesta página, o jQuery normaliza para que 'what' seja definido no objeto de evento todas as vezes. Portanto, a verificação de 'keyCode' deve ser desnecessária.
Ztyx
197
Por que a enorme contagem de votos? A questão é sobre o jQuery, que normaliza essas coisas, então não há necessidade de usar outra coisa senãoe.which o evento que você estiver usando.
Tim baixo
48
@ Tim: Infelizmente, acabei de testar isso com o Firefox usando api.jquery.com/keypress : quando pressiono <Tab>, e.whichnão está definido (permanece 0), mas e.keyCodeestá ( 9). Veja stackoverflow.com/questions/4793233/… por que isso importa.
Marcel Korpel
3
@ Marcel: Sim, o manuseio de chaves do jQuery tem falhas e esse é um exemplo infeliz, mas para a tecla Enter, que é o que esta pergunta está perguntando, a situação é extremamente simples.
Tim baixo
133

Tente isto

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){
        // Enter pressed... do anything here...
    }
});
Vladimir Prudnikov
fonte
5
@VladimirPrudnikov Oh, ah, Ahhhh! Ahh! havia mac's em todos os lugares naquele link - a humanidade !!!
21412 Ben Ben DeMott
1
Bem, também lançamos uma nova versão com o aplicativo do Windows .. confira snippets.me
Vladimir Prudnikov
2
@VladimirPrudnikov que tal uma versão linux?
Arda
@ Arda, não temos planos para a versão linux. Haverá um aplicativo web e uma API pública, por isso, pode ser alguém irá criá-la :)
Vladimir Prudnikov
1
Ha ha ha, uma ferramenta de desenvolvedor sem planos para linux. Rico!
Ziggy
61

Se você estiver usando a interface do usuário do jQuery, terá traduções para códigos de chave comuns. Em ui / ui / ui.core.js :

$.ui.keyCode = { 
    ...
    ENTER: 13, 
    ...
};

Há também algumas traduções em tests / simulate / jquery.simulate.js, mas não encontrei nenhuma na biblioteca JS principal. Veja bem, eu apenas cumprimentei as fontes. Talvez haja outra maneira de se livrar desses números mágicos.

Você também pode usar String.charCodeAt e .fromCharCode:

>>> String.charCodeAt('\r') == 13
true
>>> String.fromCharCode(13) == '\r'
true
user35612
fonte
13
A correção é * $. Ui.keyCode.ENTER ** não * $. KeyCode.ENTER - funciona como um encanto, embora valha a pena a dica!
daniellmb 02/09/09
Uncaught TypeError: String.charCodeAt is not a functionEu acho que você quis dizer'\r'.charCodeAt(0) == 13
Patrick Roberts
39

Dado que você está usando jQuery, você deve absolutamente usar. Sim, navegadores diferentes definem propriedades diferentes, mas o jQuery os normalizará e definirá o valor .que em cada caso. Consulte a documentação em http://api.jquery.com/keydown/ e declara:

Para determinar qual tecla foi pressionada, podemos examinar o objeto de evento que é passado para a função de manipulador. Enquanto os navegadores usam propriedades diferentes para armazenar essas informações, o jQuery normaliza a propriedade .which, para que possamos usá-la com segurança para recuperar o código da chave.

Frank Schwieterman
fonte
2
Pelo que vi usando event.which e tentando comparar com $ .ui.keyCode, resulta em comportamento incerto. Especificamente, a tecla [L] minúscula que mapeia para $ .ui.keyCode.NUMPAD_ENTER. Fofa.
21710 Danny
4
Você tem uma reprodução que demonstra esse bug? É preferível relatar isso aos proprietários do jQuery, em vez de tentar reimplementar seu trabalho.
precisa saber é o seguinte
31

... este exemplo impede o envio de formulários (regularmente a intenção básica ao capturar a tecla # 13):

$('input#search').keypress(function(e) {
  if (e.which == '13') {
     e.preventDefault();
     doSomethingWith(this.value);
   }
});
user184365
fonte
28

edit: Isso só funciona para o IE ...

Sei que essa é uma postagem antiga, mas alguém pode achar isso útil.

Os eventos-chave são mapeados, portanto, em vez de usar o valor do código-chave, você também pode usar o valor-chave para torná-lo um pouco mais legível.

$(document).ready( function() {
    $('#searchbox input').keydown(function(e)
    {
     setTimeout(function ()
     { 
       //rather than using keyup, you can use keydown to capture 
       //the input as it's being typed.
       //You may need to use a timeout in order to allow the input to be updated
     }, 5);
    }); 
    if(e.key == "Enter")
    {
       //Enter key was pressed, do stuff
    }else if(e.key == "Spacebar")
    {
       //Spacebar was pressed, do stuff
    }
});

Aqui está uma folha de dicas com as teclas mapeadas que eu obtive deste blog insira a descrição da imagem aqui

Kevin
fonte
5
Não há e.keypropriedade.
SLaks
3
Hmm, parece que é uma propriedade específica do IE. Funciona para o meu aplicativo no IE, mas não no Chrome. Acho que estou usando código-chave.
Kevin
28
 // in jquery source code...
 if (!event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode)) {
     event.which = event.charCode || event.keyCode;
 }

 // So you have just to use
 $('#searchbox input').bind('keypress', function(e) {
     if (e.which === 13) {
         alert('ENTER WAS PRESSED');
     }
 });
Luca Filosofi
fonte
1
Esta é a verdadeira resposta. A única aceita vai funcionar para algumas teclas (como entrar), mas falhará para outros (como supr que será enganado por um.)
Oscar Foley
19
Esta é uma pasta direta da fonte jQuery e é o código que o jQuery usa para normalizar a propriedade do evento .which.
31810 Ian Clelland
@ Ian Clelland: eu não consigo entender o seu ponto, isso está funcionando certo ou não !? lol
Luca Filosofi
13
Isso funciona; Tenho certeza disso, porque o jQuery usa exatamente esse código :) Se você já possui o jQuery disponível, basta usá-lo - você não precisa ter isso em seu próprio código.
precisa
1
@aSeptik: A pergunta era "Eu tenho o jQuery; como faço para pressionar a tecla" - sua resposta mostra como o jQuery o obtém em primeiro lugar. Meu argumento foi que, já que o jQuery já contém essa linha de código, ele não precisa dela. Ele pode apenas usar event.which.
21413 Ian Clelland
21

Confira o excelente plugin jquery.hotkeys que suporta combinações de teclas:

$(document).bind('keydown', 'ctrl+c', fn);
user397198
fonte
14
$(document).ready(function(){
    $("#btnSubmit").bind("click",function(){$('#'+'<%=btnUpload.ClientID %>').trigger("click");return false;});
    $("body, input, textarea").keypress(function(e){
        if(e.which==13) $("#btnSubmit").click();
    });
});

Espero que isso possa ajudá-lo !!!


fonte
12

Esta é praticamente a lista completa de códigos-chave:

3: "break",
8: "backspace / delete",
9: "tab",
12: 'clear',
13: "enter",
16: "shift",
17: "ctrl",
18: "alt",
19: "pause/break",
20: "caps lock",
27: "escape",
28: "conversion",
29: "non-conversion",
32: "spacebar",
33: "page up",
34: "page down",
35: "end",
36: "home ",
37: "left arrow ",
38: "up arrow ",
39: "right arrow",
40: "down arrow ",
41: "select",
42: "print",
43: "execute",
44: "Print Screen",
45: "insert ",
46: "delete",
48: "0",
49: "1",
50: "2",
51: "3",
52: "4",
53: "5",
54: "6",
55: "7",
56: "8",
57: "9",
58: ":",
59: "semicolon (firefox), equals",
60: "<",
61: "equals (firefox)",
63: "ß",
64: "@ (firefox)",
65: "a",
66: "b",
67: "c",
68: "d",
69: "e",
70: "f",
71: "g",
72: "h",
73: "i",
74: "j",
75: "k",
76: "l",
77: "m",
78: "n",
79: "o",
80: "p",
81: "q",
82: "r",
83: "s",
84: "t",
85: "u",
86: "v",
87: "w",
88: "x",
89: "y",
90: "z",
91: "Windows Key / Left ⌘ / Chromebook Search key",
92: "right window key ",
93: "Windows Menu / Right ⌘",
96: "numpad 0 ",
97: "numpad 1 ",
98: "numpad 2 ",
99: "numpad 3 ",
100: "numpad 4 ",
101: "numpad 5 ",
102: "numpad 6 ",
103: "numpad 7 ",
104: "numpad 8 ",
105: "numpad 9 ",
106: "multiply ",
107: "add",
108: "numpad period (firefox)",
109: "subtract ",
110: "decimal point",
111: "divide ",
112: "f1 ",
113: "f2 ",
114: "f3 ",
115: "f4 ",
116: "f5 ",
117: "f6 ",
118: "f7 ",
119: "f8 ",
120: "f9 ",
121: "f10",
122: "f11",
123: "f12",
124: "f13",
125: "f14",
126: "f15",
127: "f16",
128: "f17",
129: "f18",
130: "f19",
131: "f20",
132: "f21",
133: "f22",
134: "f23",
135: "f24",
144: "num lock ",
145: "scroll lock",
160: "^",
161: '!',
163: "#",
164: '$',
165: 'ù',
166: "page backward",
167: "page forward",
169: "closing paren (AZERTY)",
170: '*',
171: "~ + * key",
173: "minus (firefox), mute/unmute",
174: "decrease volume level",
175: "increase volume level",
176: "next",
177: "previous",
178: "stop",
179: "play/pause",
180: "e-mail",
181: "mute/unmute (firefox)",
182: "decrease volume level (firefox)",
183: "increase volume level (firefox)",
186: "semi-colon / ñ",
187: "equal sign ",
188: "comma",
189: "dash ",
190: "period ",
191: "forward slash / ç",
192: "grave accent / ñ / æ",
193: "?, / or °",
194: "numpad period (chrome)",
219: "open bracket ",
220: "back slash ",
221: "close bracket / å",
222: "single quote / ø",
223: "`",
224: "left or right ⌘ key (firefox)",
225: "altgr",
226: "< /git >",
230: "GNOME Compose Key",
231: "ç",
233: "XF86Forward",
234: "XF86Back",
240: "alphanumeric",
242: "hiragana/katakana",
243: "half-width/full-width",
244: "kanji",
255: "toggle touchpad"
Ivan
fonte
6

Aqui está uma descrição detalhada do comportamento de vários navegadores http://unixpapa.com/js/key.html

Phil
fonte
2
Esta é absolutamente a página que todos os que estão discutindo, fornecendo respostas desesperadas, devem estar lendo.
Tim baixo
5

Vou apenas complementar o código da solução com esta linha e.preventDefault();. No caso do campo de entrada do formulário, não comparecemos para enviar no enter pressionado

var code = (e.keyCode ? e.keyCode : e.which);
 if(code == 13) { //Enter keycode
   e.preventDefault();
   //Do something
 }
dzona
fonte
4

Adicione envio oculto, não digite oculto, envie simplesmente com style = "display: none". Aqui está um exemplo (atributos desnecessários removidos do código).

<form>
  <input type="text">
  <input type="submit" style="display:none">
</form>

ele aceita a tecla enter nativamente, sem necessidade de JavaScript, funciona em todos os navegadores.

Pedja
fonte
4

Aqui está uma extensão jquery que manipulará a tecla Enter que está sendo pressionada.

(function ($) {
    $.prototype.enterPressed = function (fn) {
        $(this).keyup(function (e) {
            if ((e.keyCode || e.which) == 13) {
                fn();
            }
        });
    };
}(jQuery || {}));

$("#myInput").enterPressed(function() {
    //do something
});

Um exemplo de trabalho pode ser encontrado aqui http://jsfiddle.net/EnjB3/8/

Reid Evans
fonte
4

Bruxa;)

/*
This code is for example. In real life you have plugins like :
https://code.google.com/p/jquery-utils/wiki/JqueryUtils
https://github.com/jeresig/jquery.hotkeys/blob/master/jquery.hotkeys.js
https://github.com/madrobby/keymaster
http://dmauro.github.io/Keypress/

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

var event2key = {'97':'a', '98':'b', '99':'c', '100':'d', '101':'e', '102':'f', '103':'g', '104':'h', '105':'i', '106':'j', '107':'k', '108':'l', '109':'m', '110':'n', '111':'o', '112':'p', '113':'q', '114':'r', '115':'s', '116':'t', '117':'u', '118':'v', '119':'w', '120':'x', '121':'y', '122':'z', '37':'left', '39':'right', '38':'up', '40':'down', '13':'enter'};

var documentKeys = function(event) {
    console.log(event.type, event.which, event.keyCode);

    var keycode = event.which || event.keyCode; // par exemple : 112
    var myKey = event2key[keycode]; // par exemple : 'p'

    switch (myKey) {
        case 'a':
            $('div').css({
                left: '+=50'
            });
            break;
        case 'z':
            $('div').css({
                left: '-=50'
            });
            break;
        default:
            //console.log('keycode', keycode);
    }
};

$(document).on('keydown keyup keypress', documentKeys);

Demonstração: http://jsfiddle.net/molokoloco/hgXyq/24/

molokoloco
fonte
4

Use event.keye JS moderno!

Não há mais códigos numéricos . Você pode verificar a chave diretamente. Por exemplo "Enter", "LeftArrow", "r", ou "R".

const input = document.getElementById("searchbox");
input.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Submit
    }
    else if (event.key === "Q") {
        // Play quacking duck sound, maybe...
    }
});

Documentos do Mozilla

Navegadores suportados

Gibolt
fonte
3
$(document).bind('keypress', function (e) {
    console.log(e.which);  //or alert(e.which);

});

você deve ter firbug para ver um resultado no console

manny
fonte
3

Alguns navegadores usam keyCode, outros usam qual. Se você estiver usando o jQuery, poderá usar com segurança o que, como jQuery, padroniza as coisas. Na realidade,

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){

    }
});
Hitesh Modha
fonte
2

De acordo com a resposta de Kilian:

Se apenas pressionar a tecla for importante:

<form action="javascript:alert('Enter');">
<input type=text value="press enter">
</form>

fonte
2

A maneira mais fácil que eu faço é:

$("#element").keydown(function(event) {
    if (event.keyCode == 13) {
        localiza_cep(this.value);
    }
});
Rodolfo Jorge Nemer Nogueira
fonte
1
Seria melhor usar em event.whichvez de event.keyCode. Da API jQuery :The event.which property normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input.
zanetu 16/09
2

Acabei de criar um plugin para jQuery que permite mais fácil keypress eventos . Em vez de precisar encontrar o número e inseri-lo, tudo o que você precisa fazer é o seguinte:

Como usá-lo

  1. Inclua o código que tenho abaixo
  2. Execute este código:
$(document).keydown(function(e) {
    if (getPressedKey(e) == theKeyYouWantToFireAPressEventFor /*Add 'e.ctrlKey here to only fire if the combo is CTRL+theKeyYouWantToFireAPressEventFor'*/) {
        // Your Code To Fire When You Press theKeyYouWantToFireAPressEventFor 
    }
});

É simples assim. Observe que nãotheKeyYouWantToFireAPressEventFor é um número, mas uma corda (por exemplo, para acionar quando pressionado, para acionar quando pressionado ou, no caso de um número, apenas sem aspas. Isso seria acionado quando pressionado.)"a"A"ctrl"CTRL (control)11

O Exemplo / Código:

Como a versão longa é tão ... bem ... longa, criei um link para o PasteBin:
http://pastebin.com/VUaDevz1

Zach Barham
fonte
Você pode tornar a função muito mais curta e mais rápida se não usar milhões de comparações "se" -> jsfiddle.net/BlaM/bcguctrx - Lembre-se de que - por exemplo, colchete aberto e colchete fechado não são colchetes abertos / fechados em um Teclado alemão.
BlaM
Gostei desta solução. agradável.
Jay
-9

Tente o seguinte:

jQuery('#myInput').keypress(function(e) {
    code = e.keyCode ? e.keyCode : e.which;
    if(code.toString() == 13) {
        alert('You pressed enter!');
    }
});
Omar Yepez
fonte