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?

14 Replies to “Focus nos campos com o Jquery”

  1. Bom artigo! Mas mesmo assim, mesmo vendo certas coisas da jQuery, não consigo usar essa lib, não me sinto a vontade… E olha que já tentei mais de uma vez.
    Só pra ter certeza: os métodos blur e focus são da jQuery né? Eles fazem o mesmo que o addEventListener?

  2. É Júlio, eu entendo como é por que com outras frameworks Javascript eu senti a mesma coisa, mas com o Jquery foi diferente. Existem várias boas frameworks, mas todas elas possuem algo em comum: facilitam a vida do desenvolvedor. Muitos programadores Javascript tradicionais podem pensar que ela seja “comodismo”, mas sem dúvida é uma ferramenta assim como frameworks para linguagens de servidor.
    Enquanto aos eventos, blur e focus do Jquery correspondem ao onBlur e onFocus do Javascript.
    Abraços…

  3. Olha meu amigo, mudou minha maneira de pensar sobre programação JAVASCRIPT, de tão facil que é, chega a brincar com nossa inteligência, e nos perguntar, porque demorou tanto pra alguem pensar nisso.. A dificuldade é natural, mais com certeza, com amigos e algumas horas de google, woce se acostuma.
    Abraços
    Ferdinando – REDE DO BEM

  4. Cara, eu sou leigo, e não sei se você falou sobre sem eu ter percebido… Mas é aqui só funcionou aqui depois que eu coloquei entre $(document).ready(function(){ FUNCAO QUE VOCÊ COLOCOU ACIMA });

  5. @Yuri: O document.ready tem que ser usado em todas as chamadas. Havia falado em outros posts que não iria falar mais esta parte, que seria trivial, incluir o jquery no head e fazer esta chamada. Realmente você tem que usá-lo em todos os seus scripts para que funcione ou qualquer um usado no blog. Abraços e boa sorte…

  6. Muito boa a matéria, mas tenho uma dúvida: Este (this) é o campo atual, certo? Como faço pra mudar TODOS os campos que estão com a classe .campo?

    Valeu!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *