HTML5 no IE8 - Placeholder | Café ++
Publicado: 03/02/2018 - Gerson Micael

HTML5 no IE8 - Placeholder

Internet Explorer 8 identificando atributo 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.

Gerson Micael
Analista Programador no setor de contact center em Aracaju - SE