Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboraï¿½ï¿½o.
Os doadores receberï¿½o material que nï¿½o consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JQuery - 1
Tutorial para Saber como Utilizar os Eventos keydown(), keypress() e keyup()

O Evento keydown()
Quando vocï¿½ pressiona uma tecla no teclado, o evento keydown() ocorre e uma vez que o evento keydown() ocorre, ele executa a funï¿½ï¿½o associada ao mï¿½todo keydown() para ser executado.
O evento keydown() geralmente ï¿½ usado com dois outros eventos:
1) Evento keypress(): especifica que a tecla estï¿½ pressionada.
2) Evento keyup(): especifica que a tecla ï¿½ liberada.
Sintaxe:
$(seletor).keydown()

Esse evento dispara o evento keydown para elementos selecionados.
$(seletor).keydown(funï¿½ï¿½o)

Esse evento adiciona uma funï¿½ï¿½o ao evento keydown.
Parï¿½metros do evento keydown()

Vejamos um exemplo para demonstrar como funciona o evento keydown().

<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function(){ $("input").keydown(function(){ $("input").css("background-color", "yellow"); }); $("input").keyup(function(){ $("input").css("background-color", "violet"); }); }); </script> <script src='/google_analytics_auto.js'></script></head> <body> Digite alguma coisa: <input type="text"> </body> </html>
Resultado:
Apï¿½s a execuï¿½ï¿½o do cï¿½digo acima a cor de fundo da caixa de texto ï¿½ branca, mas se uma tecla for pressionada a cor muda para amarelo, e quando um caractere ï¿½ digitado a cor muda para violeta, conforme mostra a imagem abaixo. Experimente no seu navegador:

O Evento keypress()
O evento keypress() ocorre quando um botï¿½o do teclado ï¿½ pressionado. Este evento ï¿½ se-melhante ao evento keydown(). O mï¿½todo keypress() ï¿½ executado ou anexa uma funï¿½ï¿½o a ser executada quando ocorre um evento keypress().
Sintaxe:
$(seletor).keypress()

Esse evento aciona o evento de pressionamento de tecla para os elementos selecionados.
$(seletor).keypress(funï¿½ï¿½o)

Esse evento adiciona uma funï¿½ï¿½o ao evento de pressionamento de tecla.
Parï¿½metros do evento keypress()

Vejamos um exemplo para demonstrar como funciona o evento keypress().

<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script> i = 0; $(document).ready(function(){ $("input").keypress(function(){ $("span").text (i += 1); }); }); </script> <script src='/google_analytics_auto.js'></script></head> <body> Digite alguma coisa: <input type="text"> <p>Teclas pressionadas: <span>0</span></p> </body> </html>
Resultado:
Cada vez que o usuï¿½rio pressiona uma tecla na caixa de texto (incluindo espaï¿½o, mas nï¿½o teclas de controle), o programa calcula em tempo real e mostra a quantidade de caracteres digitados, conforme mostra a imagem abaixo:

O Evento keyup()
O evento keyup() ocorre quando um botï¿½o do teclado ï¿½ liberado apï¿½s pressionï¿½-lo. Este mï¿½todo ï¿½ executado ou anexa uma funï¿½ï¿½o a ser executada quando ocorre um evento keyup().
Sintaxe:
$ (seletor).keyup()

Esse evento dispara o evento keyup para elementos selecionados.
$ (seletor).keyup(funï¿½ï¿½o)

Esse evento adiciona uma funï¿½ï¿½o ao evento keyup.
Parï¿½metros do evento keyup()

Vejamos um exemplo para demonstrar como funciona o evento keyup().

<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function(){ $("input").keydown(function(){ $("input").css("background-color", "red"); }); $("input").keyup(function(){ $("input").css("background-color", "yellow"); }); }); </script> <script src='/google_analytics_auto.js'></script></head> <body> Digite alguma coisa: <input type="text"> </body> </html>
Resultado:
Apï¿½s a execuï¿½ï¿½o do cï¿½digo acima a cor de fundo da caixa de texto ï¿½ branca, mas se uma tecla for pressionada a cor muda para vermelho, e quando um caractere ï¿½ digitado a cor muda para amarelo, conforme mostra a imagem abaixo. Experimente no seu navegador:

Tutorial para Saber como Utilizar os Eventos load() e unload() >>