11

Estava lendo aqui a documentação e parece que o atributo placeholder não funciona no IE8. Teria algum modo de simular o placeholder que vocês utilizam?

Exemplo de HTML que não funciona no IE8:

<input type="text"  placeholder="NOME" /> 
0

3 Respostas 3

6

Existe um projeto no GitHub com o objetivo de resolver essa questão:

Placeholders.js - An HTML5 placeholder attribute polyfill

Para usar o mesmo, é tão simples quanto incluir o ficheiro de Javascript na página:

 <script src="caminho/para/Placeholders.js"></script>

Nota: Não requer mais nenhuma framework adicional, é Javascript nativo.

A vantagem é que podes ter a tua markup devidamente atualizada fazendo uso do atributo placeholder="X" e nos navegadores antigos o Placeholders.js vai garantir que tudo funciona tal como nos navegadores modernos.

Eis a lista de suporte que obténs ao usar o mesmo:

  • Internet Explorer 6 - 9 (com Placeholders.js)
  • Firefox 1 - 3 (with Placeholders.js), 4+ (nativo)
  • Opera 7 - 10 (with Placeholders.js), 11+ (nativo)
  • Safari 3.2 (with Placeholders.js), 4+ (nativo)
  • Chrome 4+ (nativo)
  • Flock 1.0+ (com Placeholders.js)
  • Konqueror 4.3 (com Placeholders.js)
  • SeaMonkey 1+ (com Placeholders.js)
  • Maxthon 1+ (com Placeholders.js)
  • SlimBrowser 5 (com Placeholders.js)
  • K-Meleon 0.7+ (com Placeholders.js)
2
4

Você pode utilizar a solução descrita em https://pt.stackoverflow.com/a/5910/3635

Solução para navegadores não compatíveis:

Utilizando uma função chamada placeholder():

function placeholder(str){
    $('input').css('color','#ccc');
    $('input').val(str);
}

Você deve executa-la uma vez ao carregar sua página:

placeholder("Digite o produto desejado...");

E deve atribuir estes eventos ao seu input, que seria ao clicar nele(click) limpar o valor dele, e ao sair dele(blur) colocar o placeholder novamente.

$('input').on("click", function () {
  var ValorAnterior = $.cookie("ValorAtual") || "";
  $(this).val(ValorAnterior);
});
$('input').on("blur", function () {
  $.cookie("ValorAtual", $(this).val());
  placeholder("Digite o produto desejado...");
});

Porém você tem que incluir o plugin jQuery Cookie (se desejar utilizar outra forma de cookie fica a sua opção).

2
4

você pode fazer dessa maneira:

jQuery("input[placeholder]").focus(function(){
  if ( jQuery(this).val() == jQuery(this).attr('placeholder') ){
    jQuery(this).removeClass('placeholder').val('');
  }
}).blur(function(){
  if ( jQuery(this).val() == '' ){
    jQuery(this).addClass('placeholder').val( jQuery(this).attr('placeholder') );
  }
}).trigger('blur');
input.placeholder{color: green}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  Nome: <input type="text" name="nome" placeholder="Nome" /><br><br>
  Telefone: <input type="text" name="telefone" placeholder="Telefone" /><br><br>
  RG: <input type="text" name="rg" placeholder="RG" />
</form>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .