Eventos de Teclado - onkeydown, onkeyup e onkeypress

Neste tutorial de JavaScript, vamos aprender a detectar eventos de teclado, como onkeydown, onkeyup e o onkeypress.

Fazer download da apostila

Eventos de teclado: onkeydown, onkeyup e o onkeypress

Assim como os eventos de mouse, de apertar o botão do mouse, soltar e clicar, existe o mesmo para o caso de teclas do seu teclado.

O onkeywdown detecta quando a tecla é pressionada (bem rápido)
O onkeyup é o evento que detecta o contrário, quando você solta a tecla.
E o onkeypress é o de apertar uma teclada como ALT, CONTROl ou SHIFT.

O primeiro evento a ocorrer no processo de digitar uma tecla é o onkeydown, depois imediatamente onkeypress, então o sistema captura a teclada e depois ocorre o onkeyup.

No exemplo abaixo, um código simples que mostra "DOWN" quando estamos apertando uma tecla e mostra o texto "UP" quando soltamos:

Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
 Digite algo: <input type="text" id="caixa" onkeydown="down()"  onkeyup="up()">
 <div id="status"></div>

 </body>
</html>

script.js:

function down()
{
 document.getElementById("status").innerHTML="DOWN";
}

function up()
{
 document.getElementById("status").innerHTML="UP";
}

Resultado:

Digite algo:

Existe muita teoria e coisas complicadas por trás do uso da onkeypress, principalmente junto da onkeydown, então quem quiser saber em mais detalhes, veja aqui uma boa discussão:
https://stackoverflow.com/questions/3396754/onkeypress-vs-onkeyup-and-onkeydown

Se quisermos usar event handlers, basta usarmos os eventos com os nomes keydown, keypress e keyup. Nosso código JavaScript ficaria:

window.onload = function(){
 function down()
 {
  document.getElementById("status").innerHTML="DOWN";
 }

 function up()
 {
  document.getElementById("status").innerHTML="UP";
 }
 
 document.getElementById("caixa").addEventListener("keydown", down);
 document.getElementById("caixa").addEventListener("keyup", up);
}

O HTML é fica mais simples:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
 Digite algo: <input type="text" id="caixa">
 <div id="status"></div>

 </body>
</html>

Detectando uma tecla pressionada

Uma importante funcionalidade é saber que tecla foi digitada, ou seja, qual foi pra baixo (keydown).
Para saber, basta usar a propriedade key do objeto event.

No exemplo abaixo, vamos criar um script que detecta quando você digita alguma vogal: a, e, i, o ou u

Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
 Digite algo: <input type="text" onkeydown="detecta(event)">
 </body>
</html>

script.js:

function detecta(event)
{
    var tecla = event.key;
    if (tecla == "a")
     alert ("Você apertou 'a'");
 if (tecla == "e")
     alert ("Você apertou 'e'");
 if (tecla == "i")
     alert ("Você apertou 'i'");
 if (tecla == "o")
     alert ("Você apertou 'o'");
 if (tecla == "u")
     alert ("Você apertou 'u'");
}

Note que, na propriedade onkeydown chamamos a função detecta() e passamos como argumento o objeto event. Esse objeto está cheio de informações importantes.

Uma delas, é a propriedade key: event.key
Nela, fica armazenada a tecla que você pressionou.

Basta agora comparar com 'a', 'e', 'i', 'o' ou 'u' para saber qual foi pressionada.

Propriedades do objeto KeyboardEvent

Quando pressionamos uma tecla, um objeto especial é criado, é do tipo KeyboardEvent e ele possui diversas propriedades e métodos. No tópico anterior, usamos a propriedade key para detectar qual tecla foi digitada.

Existem diversas outras, e é importante você ter ao menos noção dos tipos de eventos que pode se trabalhar com seu teclado, caso um dia precise de algo, veja:

altKey - Retorna se ALT foi pressionada
charCode - Retorna o código unicode do caractere digitado
code - Retorna o código da tecla pressionada (cada tecla tem seu número, seu código)
ctrlKey - Retorna se a tecla CTROL foi pressionada
getModifierState() - Retorna se determinada teclada está ativada
key - Retorna a teclada digitada e detectada pelo evento
keyCode - Retorna o código Unicode da tecla que disparou o evento onkeypress, ou onkey down ou onkeyup
location - Retorna a localização da tecla no teclado
metaKey - Retorna se uma tecla "meta" foi pressionada
repeat - Retorna se uma teclada está sendo mantida pressionada ou não
shiftKey - Retorna se a tecla SHIFT foi pressionada ou não

Para saber em mais detalhes sobre cada uma dessas propriedades ou método:
https://www.w3schools.com/jsref/obj_keyboardevent.asp

JavaScript Progressivo