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:

15 comentários em “JavaScript: Eventos onBlur e onFocus

  • 4 de julho de 2010 em 23:18
    Permalink

    Obrigado a todos pela visitação em meu blog. Este post está entre os mais visitados.

    Resposta
  • 25 de agosto de 2010 em 18:01
    Permalink

    parabens aee, me ajudou mtu!!!

    Resposta
  • 23 de fevereiro de 2011 em 13:14
    Permalink

    Obrigada!!! Me ajudou muito!!!!!!!!!!!

    Resposta
  • 10 de abril de 2011 em 12:58
    Permalink

    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?

    Resposta
    • 10 de abril de 2011 em 17:42
      Permalink

      Olá Lucas,

      uma forma simples de fazer isso é utilizando o css inline, segue exemplo:

      <input type=”text” value=”texto com cor” style=”color:#FF0000″ />

      Resposta
  • 20 de junho de 2012 em 10:18
    Permalink

    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’;
    }

    Resposta
  • 21 de agosto de 2012 em 13:19
    Permalink

    Mais uma vez o Tiagão, me salvando a vida…. muito mais simples e inteligente dessa forma.
    Obrigado cara!!

    Resposta
  • 22 de agosto de 2012 em 10:08
    Permalink

    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

    Resposta
  • 6 de julho de 2014 em 11:14
    Permalink

    Muito bom estava desde hontem tentando fazer isto.
    pois estou puxando os valores do banco de dados e deu certinho.

    Resposta
  • 4 de outubro de 2016 em 23:29
    Permalink

    Valeu Tiago, a explicação foi clara e ajudou bastante!!!

    Resposta

Deixe uma resposta

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