Focus nos campos com o Jquery

Desculpem a demora para escrever outro Post. Estava de viagem para a minha terra natal e lá o acesso a internet é literalmente remoto.

Vou mostrar mais um simples efeito com o Jquery. Está vendo o campo de busca acima? Percebeu que quando você clica no campo a borda muda de cor e ao retirar o mouse a borda volta ao normal? Estes dois eventos correspondem ao focus e blur do Javascript respectivamente. Se não fosse o digníssimo IE6, como mostrei em posts anteriores com a pseudo-classe hover, seria possível conseguir este efeito totalmente por CSS, mas o IE6 não suporta e ele ainda é o mais usado.

Graças ao Jquery, este efeito pode ser conseguido facilmente e mais uma vez sem precisar inserir eventos no HTML.

Para começar, não esqueça de inserir a framework no head do documento. Isto foi falado nos posts anteriores.

Vamos ao código do efeito:

// focus nos campos
$('.campo').focus(function(){

  $(this).toggleClass('campo_focus');

});

$('.campo').blur(function(){

$(this).toggleClass('campo_focus');

});

Com o código acima, todos os campos com a classe campo mudará sua classe para a classe campo_focus quando o evento focus for acionado e irá retirar a classe campo_focus quando o evento blur for acionado. Relebrando o toggleClass, que já foi falado no post Hover em tabelas com o Jquery, ele adiciona a classe se ela não estiver presente, e elimina a classe se ela estiver presente. Ou seja, alterna a classe. Ela não funcionou bem para hover em tabelas, sendo necessário mudar para outro método. Mas aqui foi testado no IE6, IE7, Fiferox 2.xx e Opera 9 e funcionou perfeitamente.

Abaixo o CSS da classe campo_focus:

.campo_focus {
   border: 1px solid red;
}

Ele apenas muda a borda para vermelho.

O mesmo raciocínio pode ser aplicado para botões input. No botão de buscar acima ele muda de classe quando o usuário passa o mouse por cima e volta para a classe original quando o usuário retira o mouse. Simplesmente foi adicionado o evento hover neste campo com o toggleClass. Quer experimentar?

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>