#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:
function placeholder(){
$('input').css('color','#ccc');
$('input').val('teste');
}
placeholder();
$('input').on("click", function () {
$(this).val('');
});
$('input').on("blur", function () {
$(this).val();
placeholder();
});