Como limpar um campo input text ao clicar

Sabe quando você vai em um site que tem um formulário que já está com o campo input texto preenchido e quando você clica nele o texto some para você poder preencher com os seus dados? É essa façanha que vou mostrar pra vocês.

Bom, eu estive dando uma pesquisada a respeito disso e vi alguns códigos na internet que não funcionavam e achei uma solução super simples e direta.

Suponha que temos o seguinte formulário:

<form name="formmail" id="formmail" action="email.php" method="post">
  <input name="email" id="email" value="seu@email.com.br" />
  <input type="submit" name="btn_enviar" id="btn_enviar" value="ENVIAR" />
</form>

Até então, nada complicado.

Agora o segredo é você adicionar no campo input text que você quer fazer o efeito a seguinte propriedade e valor:

 onfocus="this.value='';"

Seu código final ficará assim:

<form name="formmail" id="formmail" action="email.php" method="post">
  <input name="email" id="email" value="seu@email.com.br" onfocus="this.value='';" />
  <input type="submit" name="btn_enviar" id="btn_enviar" value="ENVIAR" />
</form>

Explicando o código:
onfocus = Quando o manipulador de eventos estiver em foco nesta tag;
this.value = Pega o valor e atribui para “vazio”, ou seja, duas aspas simples sem nada dentro;

Simples não?

Espero que seja útil pra alguns que precisarem ou simplesmente quiserem dar um “charme” em seus formulários, ajudando aos visitantes mais leigos quando não sabem realmente o que deve ser preenchido no campo.

Aproveitei e acabei implementando aqui no meu blog, na lateral direita onde tem “Receber novidades por E-mail”. =)

Abraços e não deixem de comentar e votar!