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 server o this?
O “this” serve para fazer referência ao próprio objeto.

Resultado:

Related posts:

1. JavaScript: Setando o foco em um campo
2. JavaScript: Carregando uma página em uma nova janela
3. Como descobrir a fonte (.ttf) utilizada em uma imagem
4. JavaScript: Conceitos básicos