JavaScript: Eventos onBlur e onFocus
Primeiramente, deixe-me explicar o que são estes eventos, antes de mostrar um exemplo de utilização.
onBlur: o evento onBlur ocorre quando um objeto perde o foco. ex: você tem 2 campos de textos para digitar seus dados. O primeiro você deve digitar seu nome e no outro o seu email. Após digitar o seu nome você terá que digitar o email, certo? Se você tivesse colocado um evento onBlur no campo onde digitou o nome, ao clicar no campo de email uma ação seria disparada. Entendeu!
onFocus: este evento ocorre quando o objeto recebe o foco. ex: quando você clica em um campo para digitar algo.
Vamos ao código:
<input value="digite aqui" type="text" onblur="if(this.value == '') {this.value = 'digite aqui';}" onfocus="if(this.value == 'digite aqui') {this.value = '';}" /> |
Explicando:
1º. Ao carregar a página, este campo receberá o texto “digite aqui”. O atributo value é utilizado quando queremos definir um valor inicial para o campo.
2º. Os eventos onBlur e onFocus estão recebendo instruções de condição (if). O “if” é o “se” da nossa língua – ex: se valor for igual a 0 (zero) então faça isto. No nosso código, eu quero dizer o seguinte: quando o objeto perder o foco é disparado o evento onBlur e este evento vai checar se o atributo “value” ESTÁ EM BRANCO. Se estiver, o atributo “value” RECEBE O TEXTO. No evento onFocus é feito um check se o atributo value possui o texto “digite aqui”. Se possuir, o atributo “value” FICA EM BRANCO.
Observação: o texto inicial informado no atributo “value” e o texto digitado dentro do if do onFocus tem que ser idênticos. O JavaScript é caseSensitive, quero dizer, faz diferença de maiúscula e minúscula.
3º. Finalizando, para que serve o this?
O “this” serve para fazer referência ao próprio objeto.
Resultado:
Obrigado a todos pela visitação em meu blog. Este post está entre os mais visitados.
parabens aee, me ajudou mtu!!!
parabens, muito show, foi muito útil. grato
Muito bom. Mão na roda!
Obrigada!!! Me ajudou muito!!!!!!!!!!!
Muito obrigado. Ajudou mais uma pessoa. Uma dúvida. E se eu quiser mudar a cor da letra do valor do input, como eu faço isso usando o css?
Olá Lucas,
uma forma simples de fazer isso é utilizando o css inline, segue exemplo:
<input type=”text” value=”texto com cor” style=”color:#FF0000″ />
Obrigado. (Y)
Bom dia galera, no meu tive que fazer uma adaptação no código, além de colocar o ‘digite aqui’ no evento onBlur tive que colocar no onLoad do form também
onBlur:
if(this.value == ”) {
this.value = ‘digite aqui’;
}
onLoad:
if(document.getElementById(‘cpf’).value == ”) {
document.getElementById(‘cpf’).value = ‘digite aqui’;
}
Obrigado pela dica.
Mais uma vez o Tiagão, me salvando a vida…. muito mais simples e inteligente dessa forma.
Obrigado cara!!
Valeu pela dica e pela explicação, eu sei que a ordem dos eventos neste caso não importa, mas seria mais interessante colocar primeiro o onfocus e depois o onblur. Mas ficou explicado! Parabéns
Bom dia, eu tou pesquisando um efeito parecido com a pagina de contato desse site: http://pontocriativo.com.br/
Teria como vc me ajudar?
Muito obg.
Muito bom estava desde hontem tentando fazer isto.
pois estou puxando os valores do banco de dados e deu certinho.
Muito boa a explicação.
Valeu Tiago, a explicação foi clara e ajudou bastante!!!