Como limpar o campo input do formulário ao clicar nele

 

Sabe quando você entra em um site clica no campo de um formulário e o texto que está preenchido some para você poder preencher os seus dados? então vou mostrar para você como fazer isso com de maneira simples e direta

irei adicionar essa função no seguinte formulário

<form name="formulario" id="formulario" action="email.php" method="post">
    <input name="nome" id="nome" value="Insira o seu nome"/>
    <input type="submit" name="enviar" id="enviar" value="Enviar"/>
</form>

Então precisamos adicionar o seguinte código no input no qual você quer colocar o efeito

onfocus="this.value=''";

O código ficara da seguinte maneira

<form name="formulario" id="formulario" action="email.php" method="post">
    <input name="nome" id="nome" value="Insira o seu nome" onfocus="this.value='';"/>
    <input type="submit" name="enviar" id="enviar" value="Enviar"/>
</form>

 Entendendo o código

onfocus = Quando o manipulador de eventos estiver nesta tag.
this.value = O valor atribui para vázio, o valor que colocamos nas duas aspa simples.

Mas caso você quer que quando o usuário clique fora do código o valor volte a ser preenchido caso o campo esteja vazio precisaremos criar uma função em JavaScript, para isso insira o código abaixo na sua página

<script type="text/javascript">

function limpar (objeto, msg) {
    if (objeto.value == msg)objeto.value = '';
}

function mostrar (objeto, msg) {
    if (objeto.value == '')objeto.value = msg;
}

</script>

 Depois de inserir esse código, basta incluir o seguinte código html no seu campo input

<form name="formulario" id="formulario" action="email.php" method="post">
    <input name="nome" id="nome" onfocus="limpar (this,'Digite o texto');" onblur="mostrar (this, 'Digite o texto');" />
    <input type="submit" name="enviar" id="enviar" value="Enviar"/>
</form>

Espero que seja útil para vocês, deixe seu comentário.

2 3 4

Leia mais em http://www.diegomacedo.com.br/como-limpar-um-campo-input-text-ao-clicar/, Diego Macêdo - Analista de T.I.

2 3 4

Leia mais em http://www.diegomacedo.com.br/como-limpar-um-campo-input-text-ao-clicar/, Diego Macêdo - Analista de T.I.

2 3 4

Leia mais em http://www.diegomacedo.com.br/como-limpar-um-campo-input-text-ao-clicar/, Diego Macêdo - Analista de T.I.

2 3 4

Leia mais em http://www.diegomacedo.com.br/como-limpar-um-campo-input-text-ao-clicar/, Diego Macêdo - Analista de T.I.