Placeholder - HTML5

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:

Listagem 1: Exemplo de gambiarra antes do HTML5

<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);" />

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.

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

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

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.

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

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

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

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

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

Caso o navegador não dê suporte pode ser usado o código a seguir:

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

$(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');
});

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

Lisgtagem 6: Código que limpa os valores dos elementos que tem o placeholder antes de enviar o formulário

$(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);
		}
	});
});

É isso galera. Espero que tenham gostado. Até o próximo artigo.

Abraços ;]