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!
Diego Macêdo
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.
SHow de bola mano, obg pelo tutorial! simples e especifico. direto ao ponto. vlw!
Muito Bom! Ajudou demaissss!!!!!!
Muito bom viu….dica simples e eficiente, sou iniciante nesse mundo dos blogs e me ajudou em meu formulário 😉
vlw, muito bom!!! simples e eficiente!!!
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.
excelente!
Funcionou perfeitamente. Valeu pela dica!
Ótimo compartilhamento!
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)
.
.
.
.
.
.
Bruna, não veio o seu código. Fico no aguardo pra ver se consigo te ajudar.
Sensacional 🙂 Parabéns!
Ótima e simples, como toda solução que funciona.
Valew eu tentava em outros blog/sites e nunca dava certo…. valeu msmo
É 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.
Muito bom!!!!
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 !
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!
Sua Resposta foi IDEAL!!! Me ajudou mais de 2 anos após! rs
4 anos depois e ainda foi muito útil! muito obrigado!
Cara é simples. Do lado do onfocus=”this.value=”;” tu coloca: onBlur=”this.value’Nome’;”
Valeu.
Massa, super simples. Ajudou bastante.
Nossa Adorei mega simples … valeu
É verdade Nathalia! Continue visitando meu blog sempre que possível! Abs!
No blogger precisa ter o seguinte jogo de aspas:
onFocus=’this.value=””;’
Ou da erro.
Muito bom kra, ajudo ;D!