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 - 9
Tutorial para Saber como Utilizar os Eventos keypress() e keyup()

O Evento keypress()
O evento jQuery keypress() ocorre quando um bot�o do teclado � pressionado. Este evento � semelhante ao evento keydown(). O m�todo keypress() � executado ou anexa uma fun��o para ser executada quando ocorre um evento keypress().
Sintaxe:
$(selector).keypress()

Ele aciona o evento de pressionamento de tecla para elementos selecionados.
$(selector).keypress(function)

Ele adiciona uma fun��o ao evento keypress.
Vejamos um exemplo para demonstrar 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>Quatidade de teclas digitadas: <span>0</span></p> </body> </html>
Resultado:
Veja na imagem o resultado desse c�digo:

O Evento keyup()
O evento jQuery keyup() ocorre quando um bot�o do teclado � liberado ap�s ser pressionado. Este m�todo � executado ou anexa uma fun��o para ser executada quando ocorre um evento keyup().
Sintaxe:
$(selector).keyup()

Ele aciona o evento de pressionamento de tecla para elementos selecionados.
$(selector).keyup(function)

Ele adiciona uma fun��o ao evento keyup..
Vejamos um exemplo para demonstrar 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:
Veja na imagem o resultado desse c�digo:

<< Tutorial para Alterar a Imagem de Fundo da Tela
Tutorial para Saber como Utilizar os Eventos slideDown() e slideUp() >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino