#Resposta: Não precisa de nada do que você está fazendo, você pode apenas utilizar o atributo `placeholder` do `<input>` desta maneira: <!-- language: lang-html --> <input type="text" class="pesquisa-class" placeholder="Digite o produto desejado..." value=""> #Explicação: Utilizar [tag:javascript] pra fazer o que você precisa, não seria necessário pois os `<input>`'s do [tag: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. #[Documentação do placeholder][1] #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][2]: 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 () { $(this).val(''); }); $('input').on("blur", function () { placeholder("Digite o produto desejado..."); }); [1]: http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-placeholder-attribute [2]: http://jsfiddle.net/RfK5h/2/