Skip to main content
4 de 6
added 394 characters in body
Paulo Roberto Rosa
  • 9,2mil
  • 10
  • 43
  • 75

#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 pra fazer o que você precisa, não seria necessário pois os <input>'s do 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.

#Documentação do placeholder

#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();
});
Paulo Roberto Rosa
  • 9,2mil
  • 10
  • 43
  • 75