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!

Sou bacharel em Sistemas de Informação pela Estácio de Sá (Alagoas), especialista em Gestão Estratégica da Tecnologia da Informação pela Univ. Gama Filho (UGF) e pós-graduando em Gestão da Segurança da Informação pela Univ. do Sul de Santa Catarina (UNISUL). Certificações que possuo: EC-Council CEH, CompTIA (Security+, CySA+ e Pentest+), EXIN (EHF e ISO 27001), MCSO, MCRM, ITIL v3. Tenho interesse por todas as áreas da informática, mas em especial em Gestão e Governança de TI, Segurança da Informação e Ethical Hacking.

25 Responses to “Como limpar um campo input text ao clicar”

  1. felipe disse:

    SHow de bola mano, obg pelo tutorial! simples e especifico. direto ao ponto. vlw!

  2. Isaque disse:

    Muito Bom! Ajudou demaissss!!!!!!

  3. Antonio disse:

    Muito bom viu….dica simples e eficiente, sou iniciante nesse mundo dos blogs e me ajudou em meu formulário 😉

  4. André Lopes disse:

    vlw, muito bom!!! simples e eficiente!!!

  5. thiago disse:

    você poderia ter complementado usando o if (value == ‘Value que vc vai querer apagarquando clicar’)this.value=”;” assim nao apagaria sempre que apertasse no documento de texto.

  6. Jeconias disse:

    excelente!

    Funcionou perfeitamente. Valeu pela dica!

  7. Matheus disse:

    Ótimo compartilhamento!

  8. Bruna disse:

    Olá Diego,
    estou tentando colocar no meu código, mas não da certo. Pode me ajudar?
    Meu código é esse: (coloquei um ponto antes pra não dar erro quando eu enviar o código aqui na pagina)

    .

    .
    .
    .
    .

    .

  9. Sensacional 🙂 Parabéns!

  10. Jorge Marques disse:

    Ótima e simples, como toda solução que funciona.

  11. Dudu disse:

    Valew eu tentava em outros blog/sites e nunca dava certo…. valeu msmo

    • JOSE FILHO disse:

      É simples, mas somente depois de sabermos a técnica, pois fora isto, é impossível saber. Estava editando um script de rastreamento dos correios, e antes tinha que selecionar e apagar o texto EDITE AQUI O CODIGO DE RASTREAMENTO. com esse atributo, apenas da um clique em cima e o texto some. excelente. Valeu Diego. obrigado.

  12. Cau Bastos disse:

    Muito bom!!!!

  13. Andrey Lanhi disse:

    Valeu cara, solução mega-simples….

    Uma pergunta, quando a pessoa clica fora sem preencher nada o campo continua em branco, como faríamos para voltar ao valor original ?
    Exemplo:

    O Campo “NOME” Está escrito dentro “Nome” aí quando clica fica em branco, mas a pessoa não digitou nada e clica fora desse campo, como fazer pra quando ela clicar fora voltar a ficar escrito Nome…

    Valeu e parabéns pelo Blog !

    • Diego Macêdo disse:

      Olá Andrey, muito obrigado pelo elogio! São coisas desse tipo que me fazem ter mais vontade de continuar escrevendo aqui no meu blog.

      Quanto a sua dúvida, creio que a solução mais simples seja você criar uma função que ao se chamada, verifique se o campo está vazio e caso seja verdadeiro, atribua novamente um valor desejado. Essa função ficaria no atributo “onBlur”, ou seja, quando retirarmos o marcador de texto do campo.

      Tente fazer o código e caso não consiga, traga aqui no blog que a gente faz o que puder! Grande abraço!

      • Olá Diego

        Sua solução está correta, mas entra uma questão, se utilizarmos apenas o “onblur”, quando digitarmos alguma informação no campo, ao sairmos a mesma será excluída e o valor original inserido em seu lugar, uma saída mais correta ao meu ver, e é a que eu uso sempre é:

        onfocus=”if(this.value==’Nome’) { this.value = ”; };” onblur=”if(this.value==”) { this.value = ‘Nome’; };”

        está meio bagunçado porque eu uso tudo em uma só linha, dentro do código do campo mesmo, acaba ficando mais fácil alterar as variáveis.

        Assim é feita uma validação, sendo:

        1º – OnFocus: Se o conteúdo do campo for igual a “Nome”, então o campo será limpo, caso o usuário já tenha digitado algo, este valor vai permanecer;

        2º – OnBlur: Apenas se o campo estiver “Vazio”, o valor padrão “Nome” será inserido no mesmo, caso o usuário já tenha digitado algo, o valor digitado permanecerá.

        Espero ter ajudado, abraços a todos.

        Atenciosamente

        Peterson Santos
        CEO desKompliKa
        CEO Genius EaD

        *Em breve estarei lançando minha própria Rede Social, aguardem!

    • José Rafael disse:

      Cara é simples. Do lado do onfocus=”this.value=”;” tu coloca: onBlur=”this.value’Nome’;”

      Valeu.

  14. Marcelo disse:

    Massa, super simples. Ajudou bastante.

  15. Nossa Adorei mega simples … valeu

  16. gadarf disse:

    No blogger precisa ter o seguinte jogo de aspas:

    onFocus=’this.value=””;’

    Ou da erro.

  17. Gabriel Medina disse:

    Muito bom kra, ajudo ;D!

Deixe um comentário para Aguilar Cancelar resposta

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