Propriedade keyCode do KeyboardEvent

Eventos DOM KeyboardEvent

Definição e uso

A propriedade keyCode retorna o que desencadeou Evento onkeypress Código de caractere Unicode da tecla ou que dispara onkeydown ou Evento onkeyup Código de tecla Unicode da tecla

Diferença entre os dois tipos de código:

  • Código de caractere - Número que representa o caractere ASCII
  • Código de tecla - representa o número real da tecla na tecla

Esses tipos nem sempre significam a mesma coisa. Por exemplo, o código de teclado do "w" minúsculo e do "W" maiúsculo é o mesmo, porque a tecla pressionada é a mesma ("W" = número "87"), mas o código de caractere é diferente, porque o caractere resultante é diferente ("w" ou "W", ou seja, "119" ou "87"). - Veja mais exemplos abaixo para entender melhor isso.

Dica:Para saber se o usuário pressionou uma tecla impressível (por exemplo, "a" ou "5"), recomenda-se usar essa propriedade no evento onkeypress. Para saber se o usuário pressionou uma tecla de função (por exemplo, "F1", "CAPS LOCK" ou "Home"), use os eventos onkeydown ou onkeyup.

Observação:No Firefox, o atributo keyCode não funciona no evento onkeypress (somente retorna 0). Para uma solução cross-browser, use Atributo whichUsado juntamente com keyCode, por exemplo:

var x = event.which || event.keyCode;  // Use which ou keyCode dependendo do suporte do navegador

Dica:Para obter uma lista de todos os caracteres Unicode, consulte nossa Referência completa do Unicode.

Dica:Se você quiser converter um valor Unicode para um caractere, use Método fromCharCode().

Observação:Esta propriedade é apenas de leitura.

Observação:Os atributos keyCode e which são fornecidos apenas para compatibilidade. A especificação mais recente do DOM evento recomenda usar a propriedade key (se disponível).

Dica:Se você quiser saber se a tecla "ALT", "CTRL", "META" ou "SHIFT" foi pressionada no momento do evento de tecla, use altKey,ctrlKey/,metaKey ou shiftKey Atributo.

Exemplo

Exemplo 1

Obtenha o valor Unicode da tecla pressionada:

var x = event.keyCode;

Experimente você mesmo

Exemplo 2

Utilize onkeypress e onkeydown para demonstrar a diferença entre os códigos de caracteres e os códigos de teclado:

<input type="text" onkeypress="uniCharCode(event)" onkeydown="uniKeyCode(event)"> 
function uniCharCode(event) {
  var char = event.which || event.keyCode;
  document.getElementById("demo").innerHTML = "Código de caractere Unicode: " + char;
}
function uniKeyCode(event) {
  var key = event.keyCode;
  document.getElementById("demo2").innerHTML = "Código de chave Unicode: " + key;
}

Quando você pressionar a tecla "a" no teclado (sem usar Capslock), os resultados de char e key serão:

Código de caractere Unicode: 97
Código de chave Unicode: 65

Experimente você mesmo

Exemplo 3

Se o usuário pressionar a tecla Escape, mostre alguns textos:

<input type="text" onkeydown="myFunction(event)"> 
function myFunction(event) {
  var x = event.keyCode;
  if (x == 27) {  // 27 é a tecla ESC
    alert("Você pressionou a tecla Escape!");
  }
}

Experimente você mesmo

Exemplo 4

Converta o valor Unicode para caractere (não aplicável a teclas de função):

var x = event.keyCode;                // Obtenha o valor Unicode
var y = String.fromCharCode(x);       // Converta o valor para um caractere

Experimente você mesmo

Sintaxe

event.keyCode

Detalhes técnicos

Retorno: Valor numérico, representando o código de caractere Unicode ou o código de tecla Unicode.
Versão DOM: Eventos DOM Level 2

Suporte do navegador

Atributos Chrome IE Firefox Safari Opera
keyCode Suporte Suporte Suporte Suporte Suporte

Páginas relacionadas

Manual de referência HTML DOM:Propriedade key do KeyboardEvent

Manual de referência HTML DOM:Propriedade charCode do KeyboardEvent

Manual de referência HTML DOM:Propriedade which do KeyboardEvent

Eventos DOM KeyboardEvent