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.
