Artigos HTML e CSS 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 ;]