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" />
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeExiste um projeto no GitHub com o objetivo de resolver essa questão:
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)
Você pode utilizar a solução descrita em https://pt.stackoverflow.com/a/5910/3635
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).
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>