Diferença entre onkeydown e onkeypress em JavaScript. Dica 21

Primeira dica do nosso curso onde falamos de eventos do teclado em JavaScript.

Esta dica está muito parecida com a dica anterior, o arquivo JS inicial está em branco e, nosso HTML inicial em uma tag p eu escrevi os eventos que iremos utilizar e criei um input e uma tag span para cada evento.

<!DOCTYPE html>
<html>
    <head>
        <title>Eventos em JavaScript, parte 04. Dica 21</title>
        <script src="eventos04.js"></script>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Eventos em JavaScript, parte 04. Dica 21</h1>
        <p>Evento onkeydown</p>
        <input type="text">
        <span></span>
        <br><br>
        <p>Evento onkeypress</p>
        <input type="text">
        <span></span>
    </body>
</html>

Leia esta dica ouvindo o vídeo ou, assista ao vídeo:

A primeira coisa que faremos em nosso HTML é informar dentro de cada input o evento que será utilizado, já informando a função que ainda irei criar o JS.

<input type="text" onkeydown="down()">

<input type="text" onkeypress="press()">

Nós iremos gerenciar o conteúdo da nossa tag span a partir de seu id, e neste caso cada tag precisa ter um id diferente.

<span id="eventoKeyDown"></span>

<span id="eventoKeyPress"></span>

Já informamos todas as configurações necessárias para que o nosso exemplo funcione, falando sobre o HTML, agora vamos ao JavaScript.

Esta dica é baseada na dica anterior, nós contaremos quantas vezes os eventos são acionados, assim precisamos criar uma variável para cada evento e, de valor inicial 0 (zero).

var a = 0;
var c = 0;

Criar uma função para cada evento.

function down () {

}
function press () {

}

E seguindo o padrão das dicas anteriores, utilizar document. getElementById para gerenciar o conteúdo da tag span a partir de cada id.

function down () {
document.getElementById("eventoKeyDown").
}
function press () {
document.getElementById("eventoKeyPress").
}

E utilizar innerHTML para mostrar o valor das variáveis anteriormente criadas somadas a mais um.

function down () {
document.getElementById("eventoKeyDown").innerHTML = a+=1;
}
function press () {
document.getElementById("eventoKeyPress").innerHTML = c+=1;
}

Veja o resultado em seu navegador e, perceba que, em teclas como Ctrl e Alt um dos eventos não funciona. Se o seu teclado ter os números separados, teste com NumLock desativo (também).

Código fonte JavaScript final

var a = 0;
var c = 0;

function down () {
document.getElementById("eventoKeyDown").innerHTML = a+=1;
}
function press () {
document.getElementById("eventoKeyPress").innerHTML = c+=1;
}

Dica

Tirando a tecla f5, teste todas as teclas do teclado.

Espero que esta dica tenha sido útil e até mais.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.