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);" />
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" />
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..." />
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);
}
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');
});
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);
}
});
});
É isso galera. Espero que tenham gostado. Até o próximo artigo.
Abraços ;]
