Criando campos de texto bacanas com JQuery
October 3rd, 2008Já falei uma outra vez aqui do JQuery nesse post sobre lançamento da versão 1.2.6, e há algum tempo sou fanático por ele - assim como pelo ZK.
Na internet e no próprio site do jquery existem diversos manuais, tutoriais e assemelhados. Entretanto, eu queria fazer um layout bacana para um site, no qual os formulários utilizam campos da forma “autoclear”, ou seja, o label de cada campo fica dentro do campo de texto e quando o usuário clica o texto some. E também com um pouco de inteligência, i.e., caso o usuário não digite nada ou deixe em branco, o texto do label volta, caso contrário, o texto entrado pelo usuário permanece.
Agora, vai a dica de como fazer isso. Em primeiro lugar, devemos prestar atenção nos seguintes pontos:
- o valor do label precisa ser armazenado; esse é o valor inicial do value de cada campo
- o evento onfocus() deve ser observado, e há duas possíveis ações: se o valor do campo for o label, deve ser apagado; se o usuário já tiver digitado algum texto, o texto do usuário deve permanecer
- o evento onblur() também deve ser observado - caso o campo seja deixado em branco, o label deve aparecer novamente
Observando esses pontos, já é possível fazer forms bem bacanas!
Em primeiro lugar, devemos utilizar uma classe css específica para os elementos que utilizam. Vamos chamá-la de “autoclear”. Além disso, precisamos prestar atenção para colocar no “value” o label para o campo. Assim, o HTML fica:
<form>
<input type="text" name="campo1" value="Campo 1" class="autoclear"/><br/>
<input type="text" name="campo2" value="Campo 2" class="autoclear"/><br/>
<input type="text" name="campo3" value="Campo 3" class="autoclear"/><br/>
</form>
Nosso jQuery fica da seguinte forma:
$('document').ready(
function() {
$('.autoclear').each(function() {
// configura valores dos labels
$(this).attr('default', $(this).val());
// configura evento de foco
$(this).focus(function() {
if ($(this).val()==$(this).attr('default')) {
$(this).val('');
}
});
// configura evento blur
$(this).blur(function() {
if ($(this).val() == '') {
$(this).val($(this).attr('default'));
}
});
});
}
);
Pronto!
Em breve, posto aqui um exemplo disso funcionando e também outros tipos de campos com esse efeito! O principal que pretendo postar logo é a dica de como fazer o campo de senha…
