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.

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:

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:

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.

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 *