Eventos de Onkeydown, Onkeyup e Onkeypress com o jQuery

Tutorial ensinando a utilizar os eventos de Onkeydown, Onkeyup e Onkeypress com o jQuery.

Vamos começar pelo evento Onkeydown.

Evento Onkeydown

Para interceptar este evento utilizamos o seguinte código no jQuery.

$( "#button" ).keydown(function() {
  console.log("keydown press");
});

Você também pode utilizar on( “keydown”, handler ) ou .trigger( “keydown” ), tendo o mesmo resultado.

O evento keydown é disparado quando a tecla é pressionada.

Evento Onkeyup

Para este evento iremos utilizar a seguinte função: keyup();

Exemplo:

$( "#button" ).keyup(function() {
  console( "keyup fired" );
});

Você também pode utilizar o on( “keyup”, handler ) ou .trigger( “keyup” ) para interceptar este evento.

O parâmetro “handler” na função “on” é uma função a ser executada quando o evento ocorrer, exemplo:

var handler = function(){
 alert("handler executado.. ");
}

$("#my_button").on( "keyup", handler );

Keyup ocorre quando a tecla é liberada e está voltando para o seu estado normal.

E o Onkeypress?

No jQuery, ele funciona da mesma forma que os outros eventos.

$( "#button" ).keypress(function() {
  console.log( "key press..." );
});

Podendo também ser interceptado pelas funções “on” ou “trigger”.

Keypress Vs. Keydown Vs. Keyup

Ok, já sei como lidar com estes eventos, mais qual é a diferença entre cada um? E como posso estar utilizando cada um?

Vamos explicar isso de uma forma pratica e bem simples, digite algo no campo abaixo.

Onkeypress: …
Onkeydown: …
Onkeyup: …

Repare na ordem de execução de cada evento!

Onkeydown é acionado no momento que a tecla é pressionada e o Keyup é quando a tecla é liberada “solta”, já o Keypress é executado entre esses dois eventos.

Se você segurar qualquer tecla no campo de teste acima, você verá que o “onkeyup” ficará parado, esperando que a tecla seja liberada.

Já o Keypress e Keydown continuarão a serem executados a cada letra repetida.

Entendeu a diferença entre Onkeydown, Onkeyup e Onkeypress?

Espero ter ajudado, fique a vontade para comentar!

Bom desenvolvimento, 😉

Conheça mais sobre os eventos no jQuery clicando aqui.