Jedi Tux

JavaScript – Limpar Campos de Texto de Formulário – onfocus, onblur

Posted in JavaScript by Fernando Basso on 16 de julho de 2013

Exemplo de limar campos de texto de formulário quando o usuário foca no campo, e coloca o texto default
se o campo ficar vazio no evento ‘blur’.

clear-text.js

// Espera o DOM ficar pronto...
window.onload = initAll;

function initAll() {

    // Pega o forumlário pelo valor do atributo 'name'.
    var f = document.forms.contato;
    // Cria um array com os elementos a serem verificados.
    var arrCampos = [ f.nome, f.email ];

    // Salva o valor original de cada campo.
    for (var i = 0; i < arrCampos['length']; ++i) {
        arrCampos[i].origVal = arrCampos[i].value;
    }
    // Executa as ações de tirar e colocar o texto, conforme necessário.
    for (var i = 0; i < arrCampos['length']; ++i) {
        arrCampos[i].onfocus = tiraTexto;
        arrCampos[i].onblur  = colocaTexto;
    }
}

///////////////////////////////////////////////////////////////////////
// Aqui definimos a função que limpa o texto, mas só se o valor ///////
// for diferente do valor original. ///////////////////////////////////
function tiraTexto() {
    this.value = (this.value == this.origVal) ? '' : this.value;
}
///////////////////////////////////////////////////////////////////////
// Coloca o texto de volta caso o usuário deixou em branco ////////////
function colocaTexto() {
    if (this.value == '') { this.value = this.origVal; }
}

form.html

<!DOCTYPE html>
<html lang='pt-br'>
  <head>
    <meta charset='utf-8'>
    <title>Limpar campos de formulário com JavaScript</title>
    <link href='style.css' rel='stylesheet'>
    <script src='clear-text.js'></script>
  </head>
  <body>

    <section>
      <form name='contato' method='post' action='#'>
        <div>
          <label for='nome'>Nome:</label>
          <input type='text' name='nome' id='nome' value='Mestre Yoda...'>
        </div>
        <div>
          <label for='email'>E-Mail:</label>
          <input type='text' name='email' id='email' value='yoda@jedi.tux...'>
        </div>
        <div>
          <label for='submit'>&nbsp;</label>
          <input type='submit' name='submit' value='OK'>
        </div>
      </form>
    </section>

  </body>
</html>

style.css

html {
    font-family: 'Verdana', 'Arial', 'Serif';
    font-size: 0.9em;
    color: #4f4f4f;
    background: #cfcfcf;
}
section {
    width: 500px;
    margin: 0 auto;
    background: #efefef;
    padding: 30px;
    border-radius: 5px;
}
form {
    width: 400px;
    margin: 0 auto;
}
form div {
    margin: 10px 0;
}
div label {
    display: block;
    width: 100px;
    float: left;
    text-align: right;
    margin-right: 10px;
}
div input {
    border: 1px solid lightgray;
    width: 200px;
    padding: 5px;
}
div input[type='submit'] {
    width: 100px;
    padding: 4px;
}
div input[type='submit']:hover {
    cursor: pointer;
}

Código no github:https://github.com/FernandoBasso/devplace/tree/master/javascript/limpa-campos

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: