HTML5 no IE8 - Placeholder 
Venho hoje com um jeito simples, mas bastante eficaz para fazer de uma vez por todas o bendito Internet Explorer 8 (IE8) reconhecer o atributo Placeholder.
O placeholder, para quem não conhece, é um atributo que indica uma breve descrição ou uma dica de um campo de entrada (input). Sabendo a definição, agora vamos pôr a mão na massa.
Primeiramente criei um formulário html e no input acrescentei o atributo placeholder, ou seja, tudo normal, como se estivesse programando para Chrome, IE9, Firefox e etc.
<form action="/placeholderie8" method="post" accept-charset="utf-8">
<div>
Dados Pessoais
<input type="text" name="nome" value="" placeholder="Nome Completo">
<input type="text" name="data_nascimento" value="" placeholder="Data de Nascimento">
<input type="text" name="email" value="" placeholder="Email">
</div>
<div>
Endereço
<input type="text" name="endereco" value="" placeholder="Endereço">
<input type="text" name="numero" value="" placeholder="Numero">
<input type="text" name="complemento" value="" placeholder="Complemento Ex(Casa, Fundo, Apt 300 e etc)">
<input type="text" name="bairro" value="" placeholder="Bairro">
<input type="text" name="cidade" value="" placeholder="Cidade">
<input type="text" name="estado" value="" placeholder="Estado">
</div>
<input type="submit" value="Cadastrar">
</form>
Após criar o formulário vamos a parte mais importante e é o que interessa, ne? Nesta primeira parte do código javascript ele identifica a versão do navegador usado, e se caso for a versão 8 ou inferior, o script faz uma varredura no documento com o auxílio da função each do jquery, e intera com o seletor Input, para cada elemento é verificado se existe o atributo placeholder caso exista é acrescentado à este input o valor do placeholder e no elemento input uma classe com o nome placeholder.
if(/MSIE (d+.d+);/.test(navigator.userAgent)){
var ieversion=new Number(RegExp.$1)
if (ieversion<=8){
$('input').each(function(index_elemento,elemento){
var verifica_seExiste = $(elemento).attr('placeholder');
if(typeof verifica_seExiste!=='undefined'){
$(elemento).val($(elemento).attr('placeholder')).css('color','#a0a0a0');
$(elemento).addClass('placeholder');
};
});
}
}
Esta classe adicionada ira servir como auxilio na parte que vem agora. Nesta parte do script servirá para deixar o placeholder no IE8 mais original, ou seja, vamos adicionar eventos para quando o input receber focu o cursor fique na posição inicial, quando o usuário digitar, o texto placeholder será apagado e quando o usuário apagar o texto digitado, o valor do input voltara ao estado original.
Esta função tem o objetivo de deixar o cursor no início do input.
function cursor_inicio(elemento){
if(elemento.setSelectionRange){
elemento.focus();
elemento.setSelectionRange(0,0);
}else if(elemento.createTextRange){
var range = elemento.createTextRange();
range.collapse(true);
range.moveEnd('character', 0);
range.moveStart('character', 0);
range.select();
}
}
Nesta parte do script será identificado o evento de pressionar a tecla no elemento onde a classe possuir o nome ".placeholder", caso este evento acontecer então o usuário está imputando um valor de entrada, então esta parte do script remove a classe placeholder e apaga o valor original do input.
$(document).on('keypress','.placeholder',function(){
var valor_campo = $(this).val();
if(valor_campo.length>0){
$(this).val('');
$(this).removeClass('placeholder').css('color','');
};
});
Nesta parte do código será identificado quando o usuário libera uma tecla do teclado no elemento input, o script verifica a quantidade de caractere neste elemento, e se caso for de valor zero, então este input passa a obter o valor original, ou seja, o valor do atributo placeholder, chamo a função cursor_inicio para deixar o cursor no início do input e adiciono novamente a classe placeholder.
$(document).on('keyup','input',function(){
var valor_campo = $(this).val();
if(valor_campo.length==0){
$(this).val($(this).attr('placeholder'));
$(this).addClass('placeholder').css('color','#a0a0a0');
cursor_inicio(this);
};
});
Neta parte do código é identificado o evento de clique do mouse no elemento com classe placeholder e então chama a função cursor_inicio. Lembrando que só é colocado esta classe em elemento com o valor do atributo placeholder, por isso chamo esta função pois nosso input tem que parecer que não possui valor valido.
$(document).on('click','.placeholder',function(){
cursor_inicio(this);
});
Entendido cada parte do código então vamos juntar tudo em um arquivo de texto .html e abrir com o navegador IE8, você também pode baixar o arquivo completo clicando aqui.
Espero ter ajudado, qualquer dúvida poder comentar logo abaixo que tirarei com maior prazer todas as dúvidas.
