Opa! para não perdermos o foco, vamos manter em mente a situação inicial:

Problema:

“Possuo campos input em um formulário, onde dentro deles existe uma descrição do que o usuario deve digitar ali.
Gostaria que quando o usuário entrasse nesse campo(clicasse, tentasse preencher..), esse valor default fosse apagado.
Porém, se o usuário sair deste campo, sem escrever nada, esse valor ‘default’, deve voltar a aparecer. Sendo que se ele preencher, fique lá o que ele digitou.“

Começamos, criando a estrutura, agora vamos codificar, para “resolver mesmo” o problema.

“Gostaria que quando o usuário entrasse nesse campo(clicasse, tentasse preencher..), esse valor default fosse apagado.“

Como estamos programando numa linguagem client-side, ‘orientada a eventos’, precisamos identificar qual evento vamos usar.

O trecho:

quando o usuário entrasse nesse campo

, significa para nós e para o javascript, o evento onFocus

E o trecho

esse valor default fosse apagado

significa para o javascript: atribuir um VAZIO para o atributo .value do input.

Logo, em código, isso é:

$("input[name='telefone']").focus(function(){
    $( this ).val( '' );
  });

Não precisamos de muito, e já resolvemos a primeira parte. Bastou entender o que tínhamos que fazer, organizar de forma lógica, e ir fazendo.

Continuando:

se o usuário sair deste campo

. De novo, precisamos identificar o evento, agora estamos falando do onBlur.

sem escrever nada

, significa testarmos o atributo .value do nosso objeto input, e vermos se tem algo ou não lá. Em sintaxe jQuery, possuimos o método .val(), para acessar esse atributo HTML do input.

esse valor ‘default’, deve voltar a aparecer

, significa, atribuirmos novamente aquela mensagem ao nosso value.

$("input[name='telefone']").blur(function(){
    if( $( this ).val() == '' )
      $( this ).val( 'Digite seu telefone' );
  });

Hora de testar oque já fizemos (tudo junto):

<script type="text/javascript"> type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  /* para o input telefone */
  $("input[name='telefone']").focus(function(){
    $( this ).val( '' );
  });
  $("input[name='telefone']").blur(function(){
    if( $( this ).val() == '' )
      $( this ).val( 'Digite seu telefone' );
  });
});
</script>

  <input type="text" name="telefone" value="Digite seu telefone" />
  <input type="text" name="email" value="Digite seu e-mail" />

Bacana, aparentemente, estaria tudo pronto.

Mas daí notamos um bug!

Vamos ao fluxo:

_O cara vê o input, tem algo escrito lá. OK

Ele clica no input para escrever, nesse momento o que estava lá some. OK

Ele escreve algo e sai do input, oque ele escreveu permanecesse. OK

Ele clica novamente no input [e aqui acontece o bug], e oque ele tinha escrito some! BUG_

Essa última interação não estava prevista, e é por isso que precisamos testar os script enqnto estamos desenvolvendo.

Esse bug nos revela, que estamos apagando o conteudo do input, sem nos importar com oque estava escrito alí. Enquanto que isso só deveria ocorrer, se oque estivesse alí, fosse a nossa mensagem default. (afinal queremos que o usuário possa digitar e alterar oque ele quiser, mas não que ele envie nossa mensagem default para a gente).

Outro simples IF, e resolvemos esse ‘bug’:

$("input[name='telefone']").focus(function(){
    //só vai apagar se for igual a mensagem default
    if( $( this ).val()=='Digite seu telefone' )
      $( this ).val( '' );
  });

Parabéns, tecnicamente, resolvemos o problema. Do início ao fim.

Só que se precisarmos aplicar essa mesma rotina em outro campo:

<script type="text/javascript"> type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  /* para o input telefone */
  $("input[name='telefone']").focus(function(){
    if( $( this ).val()=='Digite seu telefone' )
    $( this ).val( '' );
  });
  $("input[name='telefone']").blur(function(){
    if( $( this ).val() == '' )
      $( this ).val( 'Digite seu telefone' );
  });
  /* para o input email */
  $("input[name='email']").focus(function(){
    if( $( this ).val()=='Digite seu e-mail' )
    $( this ).val( '' );
  });
  $("input[name='email']").blur(function(){
    if( $( this ).val() == '' )
      $( this ).val( 'Digite seu e-mail' );
  });
});
</script>

  <input type="text" name="telefone" value="Digite seu telefone" />
  <input type="text" name="email" value="Digite seu e-mail" />

Ou seja, tivemos que duplicar código !! O que é um absurdo, e devemos evitar fazer!

No próximo post, vamos ver como otimizar essa rotina, para então, melhorar ainda mais e evoluir para a criação do plugin.

Veja que primeiro identifiquei o problema, resolvi a situação, e só então incrementei e parti para ‘o nível avançado’.

Parte 1

Parte 3