JQuery - Eventos de Teclado e Formulários

Eventos de Teclado e de Formulários

Como já foi visto na biblioteca jQuery, em Events existe uma divisão entre eventos de teclado e eventos de formulários.
Lembrete: O código do formulário está embaixo nessa mesma página. É só copiar e colar.

Recuperando texto

Para recuperar um texto que foi digitado e apresentar em uma div, será selecionado um campo de texto, com o seletor :text próprio para o input do tipo texto.
Obs: digite uma frase no campo Text do formulário acima e veja o resultado.

No javaScript:
$(document).ready(function(){
$(":text").keyup(function(){
$("#msg").text($(this).val());
});
});
No javaScript:
$(document).ready(function(){
$(":text").keypress(function(){
//efeito de atraso para pegar a letra digitada
$("#msg").text($(this).val());
});
});

Evento Focus

Esse evento é disparado quando um dos elementos tem o foco do cursor. Nesse caso, quando o elemento Text tiver o foco do cursor, a cor será trocada para verde.

No javaScript:
$(document).ready(function(){
$(":text").keyup(function(){
$("#msg").text($(this).val());
}).focus(function(){
$(this).css("background", "green");
$("#msg").text("Focus");
});
});

Evento Blur

Quando o cursor sai de dentro do elemento e ele perde esse foco, o evento Blur é acionado e o texto Blur é apresentado. Faça o teste no formulário acima. Ao receber o foco o fundo fica verde e ao perder o foco, a cor muda para laranja escuro.

No javaScript:
$(document).ready(function(){
$(":text").keyup(function(){
$("#msg").text($(this).val());
}).focus(function(){
$(this).css("background", "green");
$("#msg").text("Focus"); }).focus(function(){
}).blur(function(){
$(this).css("background", "#CC6A13");
$("#msg").text("Blur");
});
});

Evento Submit

Esse evento acontece quando o formulário é submetido à validação. No exemplo abaixo se o texto tiver a palavra Ada o formulário será validado se não contiver a palavra, o formulário será inválido. É muito usado em validação.

No javaScript:
$(document).ready(function(){
$(":text").keyup(function(){
$("#msg").text($(this).val());
}).focus(function(){
$(this).css("background", "green");
$("#msg").text("Focus");
//validação de formulários
$("form").submit(function(){
if($(":text").val() == "Ada"){
return true;
}
return false;
});
});
});

Evento Change

Aqui quando a opção marcada for alterada pelo internauta, o texto com a opção escolhida será apresentado.

No javaScript:
$(document).ready(function(){
$(":text").keyup(function(){
$("#msg").text($(this).val());
}).focus(function(){
$(this).css("background", "green");
$("#msg").text("Focus");
});
$("select").change(function(){
var escolha = $("option:selected").text();
$("#msg").text("Escolhido : " + escolha);
});
});

Evento Select

O evento select indica se houve uma seleção do conteúdo da textarea, para a biblioteca jQuery.

No javaScript
$(document).ready(function(){
$(":text").keyup(function(){
$("#msg").text($(this).val());
}).focus(function(){
$(this).css("background", "green");
$("#msg").text("Focus");
});
$("select").change(function(){
var escolha = $("option:selected").text();
$("#msg").text("Escolhido : " + escolha);
});
});

Para aprofundar os conhecimentos de eventos de teclado e formulário, pesquisar na Biblioteca jQuery na seção de Events.

	
No Html:
<div id= "msg"></div>
	
<form action= "eventos-teclado-formularios.html" method="get">
   <fieldset>
       <legend>Formulário</legend>
    Text <input type="text" />

Select:
<select id= "pais">
<option value= "BR" selected="selected">Brasil</option>
<option>Bolívia</option>
<option>EUA</option>
<option disabled="disabled">Portugal</option>
<option disabled="disabled">França</option>
</select>


<textarea rows="6" cols="40" tabindex="1">Escreva aqui...</textarea>>

<input type="submit" value="Submit" />
<input type="reset"  value="Reset" />

</fieldset>

Voltar ao topo