#Resposta:
Não precisa de nada do que você está fazendo, você pode apenas utilizar o atributo placeholder
do <input>
desta maneira:
<input type="text" class="pesquisa-class" placeholder="Digite o produto desejado..." value="">
#Explicação:
Utilizar javascript pra fazer o que você precisa, não seria necessário pois os <input>
's do html contém alguns atributos que facilitam muitas coisas, dentre eles o placeholder
seria o atributo mais indicado para o que você quer fazer.
O placeholder é a maneira mais moderna de informar o usuário o que ele tem que digitar no tal campo, anteriormente utilizamos Label's que seriam textos acima do campo.
#Compatibilidade: Testado e funcionando nos seguintes navegadores:
- Mozilla Firefox (27.0)
- Google Chrome (32.0)
- Safari (5.1.7)
- Opera (12.16)
- Internet Explorer (IE11,IE10)
Não funciona nos seguintes navegadores:
- Internet Explorer(IE9,IE8,IE7)
#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).