Placeholder em HTML5: Texto padr�o de input

Veja nesse artigo o funcionamento do atributo PLACEHOLDER implementado em algumas TAGs no HTML5, uma forma de detecç�o de suporte do navegador e um exemplo de c�digo caso o navegador n�o d� suporte.

Quem nunca precisou colocar um valor padr�o dentro do input e teve que fazer uma gambiarra, digo, adaptaç�o t�cnica do tipo:


<input type="text" name="nome" value="Seu Nome" 
onfocus="javascript:(this.value=='Seu Nome'?this.value = '':null);" 
onblur="javascript:(this.value==''?this.value = 'Seu Nome':null);" />

Listagem 1. Exemplo de gambiarra antes do HTML5

O Placeholder resolve esse problema inserindo, dentro do input, um texto que ser� apagado quando começar a digitar dentro do campo, e mostrado de novo ao perder o focus do elemento e o conte�do seja vazio.


<input type="text" name="nome" value="" placeholder="Seu Nome" />

Listagem 2. Exemplo de uso do placeholder aplicado em input.

No exemplo acima o texto "Seu Nome" ir� aparecer dentro do input enquanto o conte�do do mesmo for vazio.

Esse novo atributo tamb�m pode ser usado em textareas.


<textarea name="mensagem" value="" placeholder="Digite uma mensagem..." />

Listagem 3. Exemplo de uso do placeholder aplicado em textarea.

No exemplo acima o texto " Digite uma mensagem..." ir� aparecer dentro do textarea enquanto o conte�do do mesmo for vazio.

Para verificar se o navegador tem suporte pode utilizar o seguinte c�digo, conforme a listagem 4:


function suportaPlaceholder() {
  var elemento = document.createElement('input');
  return ('placeholder' in elemento);
}

Listagem 4. Como verificar se o navegador tem suporte ao placeholder?

Caso o navegador n�o d� suporte pode ser usado o c�digo a seguir:


$(function(){
  $('[placeholder]').focus(function(e) {
  var elemento = $(e.target);
  if (elemento.val() == elemento.attr('placeholder')) {
    elemento.val('');
  }
  }).blur(function(e) {
  var elemento = $(e.target);
  if (elemento.val() == '' || elemento.val() == elemento.attr('placeholder')) {
    elemento.val(elemento.attr('placeholder'));
  }
  }).trigger('blur');
});

Listagem 5. Exemplo placeholder para navegadores sem suporte. Usando a biblioteca jQuery.

Para evitar que os valores padr�es sejam enviados para o formul�rio, no exemplo acima, pode ser usado o script a seguir:


$(function(){
  $('[placeholder]').parents('form').bind('submit', function(e) {
    var $form = $(e.target);
    if(!!$form.data('binded') == false){
      $(e.target).find('[placeholder]').each(function(i,el) {
        if (el.val() == el.attr('placeholder')) {
          el.val('');
        }
      });
      $form.data('binded',true);
    }
  });
});

Listagem 6. C�digo que limpa os valores dos elementos que tem o placeholder antes de enviar o formul�rio

� isso galera. Espero que tenham gostado. At� o pr�ximo artigo.

Abraços ;]

Placeholder em HTML5: Texto padr�o de input

Veja nesse artigo o funcionamento do atributo PLACEHOLDER implementado em algumas TAGs no HTML5, uma forma de detecção de suporte do navegador e um exemplo de código caso o navegador não dê suporte.

Artigos relacionados