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