quarta-feira, 20 de janeiro de 2010

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

Tag <script>

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

17 comentários:

Vinicius disse...

Show de bola essa dica... abraços

Ricardo Veloso disse...

Obrigado!

Anônimo disse...

mas to com uma duvida, tipo, como q faço pra tirar o bug de:

qndo eu clico na caixa de texto, ok o efeito sai e posso digitar, mas se eu clicar em qlqer outro lugar, oq eu escrevi sai e volta o campo do marca dagua =/
Eu qeria clicar em algum lugar e voltar e permanecer aquilo q eu digitei, igual o do mxmasters por exemplo: www.mxmasters.com.br

VlwW ^^

Ricardo Veloso disse...

Corrigido! Agora, caso haja texto digitado na caixa de texto, a caixa permanecerá intacta, até que o texto seja apagado pelo usuário.

Anônimo disse...

Show demais cara ^^ JS eh muito bom, o problema q eu axo eh q se o JS do cliente tiver desativado ele nao poderá ver :/
A msm coisa eh em validação de formulario por JS...
Falando nisso, vc sabe validar por JS ou PHP?? To tentando aprender, mas todos os tutoriais q encontro pela net nao satisfazem minhas necessidades :/
Abraço cara, muito bom esse ai da marca dagua

Ricardo Veloso disse...

Bom, a maioria dos sites usam JavaScript, e se um cliente está com o JavaScript desabilitado, ele estará perdendo o melhor da Web, pois até o Google usa JavaScript.

Eu sei fazer validação de formulários por JavaScript e PHP, e já que você falou nisso, acho que vou criar um tutorial sobre isso.

Obrigado e abraço.

Anônimo disse...

poxa, pois, por favor, crie msm, q na web ta extremamente dificil encontrar um tuto, facil e sem erros, principalmente sobre validação em PHP, poxa, aguardarei *_*
Brigado! Meu nome eh elton, meu email/msn eh: eltonaxl@hotmail.com
qlqer coisa so entrar em contato, abraço!

Anônimo disse...

Opa!! Alguma novidade??? Vlww, abraço!

Ricardo Veloso disse...

Ainda não, estou em provas na faculdade, mas logo terei mais tempo para atualizar o blog.

Anônimo disse...

aew, aproveitando aki, vc sabe fazer um carousel 3D??? eu fiz um, olha aki: www.byeltin182.orgfree.com
So q nao consigo modifica-lo como eu qeria, se puder ajudar, ja fiz o mais dificil, so q pra modificar, qeria colocar as "setinhas", titulo, aumentar/abaixar a velocidade e por o reflexo embaixo, so q nao consigo... To pedindo muito neh :D
mas isso ai, junto com a validação do formulario, sao as coisas q mais batalho pra consegui, rsrsrs, abraço!

Ricardo Veloso disse...

Legal, mas não sei fazer, não. Em relação ao reflexo, eu encontrei uma bilioteca JavaScript que faz isso, em http://www.digitalia.be/software/reflectionjs-for-jquery

Abraço.

Anônimo disse...

Aew cara, 2 coisas: ja entrou de ferias :D
e a segunda, sobre o link q c enviou desse plugin, nao ta dando pra baixar, ta off =(
Dai procurei na net e so achei o reflection feito em javascript q o code eh muito maior e mais pesado =/
Vc tem esse msm plugin feito em jquery? Q ta nesse site so q o link ta off?? Vlww!!

Ricardo Veloso disse...

To de férias sim... Parecia que esse dia nunca iria chegar! XD

Sobre o plugin, eu o baixei hoje sem problemas... Mandei pro seu e-mail.
Também tem este (só 5 KB): http://cow.neondragon.net/stuff/reflection/

Anônimo disse...

aew, voc sabe fazer esse menu aki:

www.mxmasters.com.br

Esse menu ta complicado... nao consigo de jeito nenhum, mais de 1 mes tentando e nada T_T

O html ta perfeito, mas o css e o jquery nao consigo de jeito nenhum =(

Ricardo Veloso disse...

Eu nunca usei jQuery antes, então não sei muito sobre isso, mas acredito que o efeito é realizado pela função fadeOut(). A parte de CSS: o elemento <ul> usa "display: block" e os <il> usam "display: inline". Isso permite que todos os itens da lista fiquem na mesma linha.

Veja:

http://api.jquery.com/fadeOut/
http://maujor.com/tutorial/cssmenu.php#menuhor

Sphinx disse...

Show de bola, obrigado!

Unknown disse...

mt bom, parabens

Postar um comentário