Focus nos campos com o Jquery
Thu 02 Aug 2007
-
Categorias
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?
Bio
Meu nome é Alexandre Magno, sou analista de sistemas e trabalho atualmente na Globo.com, com especialidade na construção de interfaces Web para os diversos produtos das Organizações Globo. Tenho experiência em várias tecnologias Web, dentre elas HTML/CSS/Javascript, Wordpress e Ruby on Rails, além de ser um evangelista jQuery.
Comentários
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?
É 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…
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
Tbm gosto bastante de Jquery , o post foi legal, aplique aqui no meu projeto deu um bug qdo uso a validação,
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 });
@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…
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!
@Alexandre: Neste caso é só referenciar pelo seletor, neste caso $(‘.campo’). Espero ter ajudado abraços!
teria como junto com este efeito acrescentar o efeito de hover ?
abs!
@Alexandre: Sim poderia ser usado sem problema.
como faço isso ?
@Alexandre Magno, pode me ajudar ?
meu código ta belezinha gostaria de apenas ACRESCENTAR o hover nos campos…
veja meu código:
http://pastebin.com/e0hLeNaq
se puder me ajuadar ficarei muito grato.
abração.
CORREÇÃO MEU CÓDIGO:
http://pastebin.com/r463r6VW
@Alexandre: Dê uma olhada no artigo:
http://www.alexandremagno.net/blog/2007/07/18/hover-em-tabelas-com-o-jquery
Ao invés de passar um código pronto acho muito melhor você entender como fazer. Abraços e boa sorte.