.keyCode vs.

Eu pensei que isso seria respondido em algum lugar no Stack Overflow, mas não consigo encontrá-lo.

Se eu estiver ouvindo um evento de pressionamento de tecla, devo estar usando .keyCode ou .keyCode para determinar se a tecla Enter foi pressionada?

Eu sempre fiz algo parecido com o seguinte:

 $("#someid").keypress(function(e) { if (e.keyCode === 13) { e.preventDefault(); // do something } }); 

Mas estou vendo exemplos que usam .which vez de .keyCode . Qual é a diferença? É mais um cross-browser do que o outro?

Alguns navegadores usam keyCode , outros usam which . Se você estiver usando o jQuery, poderá usar com segurança o which como o jQuery, padroniza as coisas . Mais aqui.


Se você não estiver usando o jQuery, você pode fazer isso:

 var key = 'which' in e ? e.which : e.keyCode; 

Ou alternadamente:

 var key = e.which || e.keyCode || 0; 

… que lida com a possibilidade de que e.which pode ser 0 (restaurando esse 0 no final, usando o operador ||

jQuery normaliza event.which dependendo se event.which , event.keyCode ou event.charCode é suportado pelo navegador:

 // Add which for key events if ( event.which == null && (event.charCode != null || event.keyCode != null) ) { event.which = event.charCode != null ? event.charCode : event.keyCode; } 

Um benefício adicional de .which é que o jQuery também faz cliques de mouse:

 // Add which for click: 1 === left; 2 === middle; 3 === right // Note: button is not normalized, so don't use it if ( !event.which && event.button !== undefined ) { event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) )); } 

Se você estiver hospedado em vanilla Javascript, observe que o keyCode agora está obsoleto e será descartado:

Este recurso foi removido dos padrões da Web. Embora alguns navegadores ainda possam suportá-lo, ele está sendo descartado. Evite usá-lo e atualizar o código existente, se possível; veja a tabela de compatibilidade na parte inferior desta página para orientar sua decisão. Esteja ciente de que esse recurso pode deixar de funcionar a qualquer momento

https://developer.mozilla.org/pt-BR/docs/Web/API/KeyboardEvent/keyCode

Em vez disso, use: .key ou .code dependendo do comportamento desejado: https://developer.mozilla.org/pt-BR/docs/Web/API/KeyboardEvent/code https://developer.mozilla.org/en -US / docs / Web / API / KeyboardEvent / key

Ambos são implementados em navegadores modernos.

veja isto: https://developer.mozilla.org/pt-BR/docs/Web/API/event.keyCode

Em um evento de pressionamento de tecla, o valor Unicode da tecla pressionada é armazenado na propriedade keyCode ou charCode, nunca em ambos. Se a tecla pressionada gerar um caractere (por exemplo, ‘a’), charCode será definido para o código desse caractere, respeitando o caso de letras. (isto é, o charCode leva em consideração se a tecla shift está pressionada). Caso contrário, o código da tecla pressionada é armazenado em keyCode. keyCode é sempre definido nos events keydown e keyup. Nestes casos, o charCode nunca é definido. Para obter o código da chave, independentemente de ter sido armazenado em keyCode ou charCode, consulte a propriedade which. Os caracteres inseridos por meio de um IME não são registrados por meio de keyCode ou charCode.

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('ctrl+a,ctrl+b,r,f', function(event,handler){ switch(handler.key){ case "ctrl+a":alert('you pressed ctrl+a!');break; case "ctrl+b":alert('you pressed ctrl+b!');break; case "r":alert('you pressed r!');break; case "f":alert('you pressed f!');break; } }); 

hotkeys entende os seguintes modificadores: , shift , option , , alt , ctrl , control , command e .

As seguintes teclas especiais podem ser usadas para atalhos: backspace , tab , clear , enter , return , esc , escape , space , up , down , left , right , home , end , pageup , pagedown , del , delete e f1 a f19 .

Eu recomendaria event.key atualmente. Documentos do MDN: https://developer.mozilla.org/pt-BR/docs/Web/API/KeyboardEvent/key

event.KeyCode e event.which ambos têm avisos desagradáveis ​​no topo de suas páginas MDN:
https://developer.mozilla.org/pt-BR/docs/Web/API/KeyboardEvent/keyCode https://developer.mozilla.org/pt-BR/docs/Web/API/KeyboardEvent/which

Para chaves alfanuméricas, event.key parece ser implementado de forma idêntica em todos os navegadores. Para chaves de controle (tab, enter, escape, etc), event.key tem o mesmo valor em Chrome / FF / Safari / Opera, mas um valor diferente em IE10 / 11 / Edge (IEs aparentemente usa uma versão mais antiga da especificação, mas corresponde uns aos outros a partir de 14 de janeiro de 2018).

Para chaves alfanuméricas, um cheque seria parecido com:

 event.key === 'a' 

Para caracteres de controle, você precisaria fazer algo como:

 event.key === 'Esc' || event.key === 'Escape' 

Eu usei o exemplo aqui para testar em vários navegadores (eu tive que abrir no codepen e editar para fazê-lo funcionar com o IE10): https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ código

event.code é mencionado em uma resposta diferente como uma possibilidade, mas o IE10 / 11 / Edge não o implementa, por isso é necessário se você quiser suporte ao IE.

No Firefox, a propriedade keyCode não funciona no evento onkeypress (retornará apenas 0). Para uma solução entre navegadores, use a propriedade which juntamente com keyCode, por exemplo:

 var x = event.which || event.keyCode; // Use either which or keyCode, depending on browser support