No tutorial de hoje, vamos aprender como os eventos onkeypress, onkeyup e onkeydown são utilizados e quando utiliza-los, e também entender algumas das diferenças básicas para o funcionamento corretos dos mesmos.

Onkeypress, onkeyup e onkeydown.

A principal diferença entre eles está relacionada no momento em que os eventos são disparados, ou seja, cada evento tem um momento correto de ser executado.

O onkeydown é disparado assim que a tecla é pressionada, sendo assim o primeiro entre os eventos a ser disparado. Em seguida é a vez do onkeypress, ou seja, enquanto a tecla está sendo pressionada e por último, quando a tecla é solta, o evento onkeyup é executado.

Outra diferença fundamental é que nem todas as teclas são tratadas em todos os navegadores no onkeypress. Em geral ele se limita apenas em disparar eventos quando a tecla, única, gerar algum caractere ASCII, fazendo com que ALT, CTRL e Backspace, por exemplo, não disparem eventos. Por outro lado, qualquer tecla gera evento tanto em onkeypress quanto em onkeydown, desde que respeitados sua definição, conforme parágrafo anterior.

Se pressionarmos e soltarmos uma tecla, primeiro se produz um evento keydown ao pressionar a tecla, em seguida um keypress e por último um keyup ao soltá-la.

Se pressionarmos de modo prolongado uma tecla este esquema varia, pois se produz um keydown e em seguida um keypress. Enquanto se mantém apertada a tecla em loop se vai produzindo eventos keydown e keypress, repetidas vezes até que finalmente se solta à tecla e se produz um keyup.

No caso das teclas CTRL, Maiúsculas ou ALT, se produzem múltiplos keydown até que se solta à tecla e se produz um keyup. Ou seja, ao apertar uma destas teclas não se produz o evento keypress.

Exemplo de Onkeypress, onkeyup e onkeydown

Veja abaixo exemplos simples do uso desses eventos, você poderá implementar da maneira que melhor lhe atender em seu projeto.

 <script> $('.teste').keydown(function(){ alert("voce pressionou a tecla...."); }); $('.teste').keypress(function(){ alert("voce esta pressionando a tecla...."); }); $('.teste').keyup(function(){ alert("voce soltou a tecla...."); }); </script>

Você pode conferir como utiliza-las dos mais diversos modos no site da JQuery.

Dúvidas críticas ou sugestões comentem abaixo que teremos o prazer em tentar ajuda-los. =)