Como criar o efeito de marca d’água numa caixa de texto

Já reparou no efeito de marca d’água da caixa de Pesquisa Personalizada do Google? Neste tutorial estarei explicando como criar o mesmo efeito em qualquer caixa de texto, em qualquer navegador.

Efeito simples com HTML5

Isso é muito simples de fazer e a marca d’água pode ser tanto um texto como uma imagem. Para uma marca d’água simples de texto, você pode usar o atributo placeholder do HTML5, que todos os principais navegadores suportam, com exceção do Internet Explorer.

Código HTML:

<input type="text" placeholder="Digite aqui" />

Resultado (você não verá a marca d’água se estiver usando o Internet Explorer):

Efeito avançado com HTML5 e JavaScript

Adicionalmente, se você deseja que o efeito também funcione no Internet Explorer ou quer incrementar com uma imagem ou estilo de fonte diferente, você pode usar JavaScript.

Crie uma caixa de texto, como de costume, atribuindo-lhe uma frase padrão para data-value (um atributo personalizado do HTML5) e lhe dê a classe water. Através do evento onblur, mude o valor do atributo value para o texto padrão e a cor do texto para cinza (ou qualquer outra), para que quando o usuário clicar fora da caixa de texto, ou submeter um possível formulário, o texto padrão apareça, com sua cor cinza.

Através do evento onfocus, limpe o valor do atributo value e mude sua cor de texto para preto (ou qualquer outra), para que quando o usuário clicar na caixa de texto, o texto padrão desapareça e a cor normal seja restabelecida.

Código HTML:

<input type="text" class="water" data-value="Digite aqui" />

Código JavaScript:

window.onload = function()
{
  var input = document.getElementsByClassName("water");

  for (var i = 0; i < input.length; i++)
  {
    input[i].style.color = "gray";
    input[i].style.fontStyle = "italic";
    input[i].value = input[i].getAttribute("data-value");
    input[i].setAttribute("data-value", "");

    input[i].onblur = function()
    {
      if (this.value.length === 0)
      {
        this.style.color = "gray";
        this.style.fontStyle = "italic";
        this.value = this.getAttribute("data-value");
        this.setAttribute("data-value", "");
      }
    }

    input[i].onfocus = function()
    {
      if (this.getAttribute("data-value") === "")
      {
        this.style.color = "black";
        this.style.fontStyle = "normal";
        this.setAttribute("data-value", this.value);
        this.value = "";
      }
    }
  }
}

Resultado:

Usando uma imagem

Para usar uma imagem como marca d’água, simplesmente adicione uma imagem de fundo através do evento onblur.

Código HTML:

<input type="text" class="water" data-value="url('http://www.blogger.com/favicon.ico')" />

Código JavaScript:

window.onload = function()
{
  var input = document.getElementsByClassName("water");

  for (var i = 0; i < input.length; i++)
  {
    input[i].style.backgroundImage = input[i].getAttribute("data-value");
    input[i].setAttribute("data-value", "");

    input[i].onblur = function()
    {
      if (this.value.length === 0)
      {
        this.style.backgroundImage = this.getAttribute("data-value");
        this.setAttribute("data-value", "");
      }
    }

    input[i].onfocus = function()
    {
      if (this.getAttribute("data-value") === "")
      {
        this.setAttribute("data-value", this.style.backgroundImage);
        this.style.backgroundImage = "none";
      }
    }
  }
}

Resultado:

Para mais informações sobre como modificar uma página usando JavaScript, consulte o meu tutorial “Como modificar uma página, com JavaScript”. Para aprender sobre eventos, consulte o meu tutorial “Como usar event listeners com Javascript”.

Postagens relacionadas

• Introdução ao jQuery
• Como usar event listeners com Javascript
• Como validar formulários com JavaScript
• Como modificar uma página, com JavaScript
• Como chamar um script em uma página
• Como usar funções em JavaScript
• Como transformar uma área em um link discreto