Como identificar uma tecla pressionada usando a propriedade "keyCode" do Javascript

Por: Angelo Luis Ferreira | 26/02/2020 Acessos: 20.181

Neste tutorial vamos mostrar como identificar e validar a tecla que está sendo pressionada em um determinado evento JavaScript. Para isto, vamos utilizar a propriedade keyCode que retorna o código Unicode da tecla que acionou um evento de teclado, como: onkeypress, onkeydown ou onkeyup.

Unicode é um padrão adotado mundialmente que possibilita com que todos os caracteres de todas as linguagens escritas possam ser representadas na tela do computador. O objetivo ao Unicode é apresentada no site Unicode Consortium (entidade responsável pela sua gestão) como: Unicode fornece um número hexadecimal único para cada caractere, não importa a plataforma, não importa o programa e não importa a linguagem, ou seja, representa todas as letras, pontuação, símbolos técnicos e símbolos especiais em qualquer idioma. Para saber mais leia: https://pt.wikipedia.org/wiki/Unicode

Obs.: Veja as tabelas completas do padrão Unicode:  http://www.unicode.org/charts/

 Exemplo de uma tabela Unicode:

 Eventos de teclado

a) onkeydown: o evento JavaScript ocorre no momento em que a tecla é pressionada.

b) onkeypress:  o evento JavaScript  ocorre quando a tecla está pressionada.

c) onkeyup: o evento JavaScript ocorre quando a tecla retorna à posição original no teclado (i.e. quando você solta a mesma).

Propriedade "keyCode"

1. A propriedade keyCode retorna um código Unicode referente à tecla que foi acionada por um evento de teclado, ou seja, retorna um número decimal convertido a partir do do código Unicode do caractere representado por esta tecla.

2. Para obter os valores padrões básicos de um teclado em Português, acesse a tabela https://www.w3schools.com/charsets/ref_utf_basic_latin.asp.

3. Para obter os valores padrões online do seu teclado, acesse o link: https://keycode.info/

Observações e dicas:

1.1. A mesma tecla pode ter valores diferentes retornados pelo "keyCode". Por exemplo, W (maiúsculo) retorna 87 e w (minúsculo) retorna 119,

1.2. Para descobrir se o usuário está pressionando uma tecla imprimível (por exemplo, "a" ou "5"), é recomendável usar esta propriedade no evento onkeypress.

1.3. Para descobrir se o usuário está pressionando uma tecla de função (por exemplo, "F1", "CAPS LOCK", "ESC" ou "Home"), use o evento onkeydown ou onkeyup.

1.4. Para identificar as teclas ALT", "CTRL", "META" or "SHIFT"  use as propriedades altKey, crtKey, metaKey ou shiftkey.

Sintaxe:

event.keyCode

 Abaixo vamos apresentar alguns exemplos para o melhor entendimento da propriedade keyCode:

Exemplo 1 - Identificar e retornar o valor Unicode de uma tecla

1. Ao pressionar uma tecla qualquer é retornado o valor Unicode dessa tecla e o caractere digitado.

1.1. O valor Unicode retornado é convertido em decimal.

1.2. Para convertemos o número Unicode em um caractere vamos utilizar o método String.fromCharCode().

1.3. Observe que utilizamos o evento onkeypress para identificar itens imprimíveis.

HTML

<p>Pressione uma tecla do teclado para obter o número do keyCode e o caractere.</p>
<input type="text" size="40" onkeypress="digitar(event)">
<p id="letra"></p>

JavaScript

function digitar(event) {
  var x = event.keyCode;         // Obtém o valor Unicode (decimal)
  var y = String.fromCharCode(x);    // Converte o valor em um caractere
  document.getElementById("letra").innerHTML = "Número: " + x + " = Caractere: " + y;  
}

Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado.

Exemplo 2 - Validar a tecla "esc"

2. Verifica se a tecla esc foi pressionada.

2.1. Observe que utilizamos o evento onkeydown para identificar a tecla "esc".

HTML

<p>Digite no campo input. Ao digitar a tecla "esc" um alerta será apresentado.</p>

<input type="text" size="50" onkeydown="digitar(event)"> 

JavaScript

function digitar(event) {
  var x = event.keyCode;
  if (x == 27) {
    alert ("Você pressionou a telcla Escape!");
  }
}

Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado.

Exemplo 3 - Validar a tecla "enter"

3. Digite qualquer texto e ao clicar enter o texto é retornado.

3.1. Observe que utilizamos o evento onkeypress para identificar a tecla "enter". A tecla "enter" pode ser considerada uma tecla imprimível.

HTML

<p>Digite um frase e após a tecla "Enter".</p>
<input id="in" type="text" size="40" onkeypress="digitar(event)">
<p id="letra"></p>

JavaScript

var text = ""

function digitar(event) {

  let x = event.keyCode  // Retorna um valor Unicode
  
  if (x == 13) { // Verifica se foi digitao "Enter"	   
    document.getElementById("letra").innerHTML = "Texto digitado: " + text; 
    document.querySelector("#in").value = ""
	text = ""
    
  } else {
  	let y = String.fromCharCode(x);  // Converte o valor em um caractere
    text += y
  }  
}

Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado.

Documentação Oficial

1. [event.keyCode] » Sobre a propriedade keyCode - MDN Web Docs.

2. [lonkeypress] » Sobre o evento onkeypress - MDN Web Docs.

2. [lonkeydown] » Sobre o evento onkeydown - MDN Web Docs.

2. [lonkeyup] » Sobre o evento onkeyup - MDN Web Docs.