Eventos de Onkeydown, Onkeyup e Onkeypress com o jQuery

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

Post sobre os eventos Onkeydown, Onkeyup e Onkeypress com o jQuery, framework do javascript

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.

 

 

 

Resumo
Utilizando Onkeydown, Onkeyup e Onkeypress com o jQuery
Nome do Artigo
Utilizando Onkeydown, Onkeyup e Onkeypress com o jQuery
Descrição
Como interceptar os eventos Onkeydown, Onkeyup e Onkeypress no jQuery e qual a diferença entre cada um.
Autor
Editor
Roger Mauricio Takemiya
Logo do Editor

Avalie este artigo!

Clique nas estrelas, para dar uma nota de 1 à 5.

1 estrela2 estrelas3 estrelas4 estrelas5 estrelas (1 votaram, média: 5,00 de 5)
Loading...

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *