Neste artigo, explicaremos como aplicar o value na TAG de busca (##Busca##) e, ainda, como fazer a verificação para removê-lo quando o campo de busca for selecionado.

Utilizaremos a biblioteca jQuery neste artigo. Sendo assim, podemos puxá-la diretamente do servidor da Dotstore:

<script type="text/javascript" src="http://www.dotstore.com.br/dotstore/inc/extras/jquery.min.js"></script>

Observação: É aconselhável que puxemos a biblioteca no arquivo BarraTopo.htm para que todas as páginas possam carregar a blibioteca.

Puxaremos a TAG especial da busca:
##Busca % botao='imagens/botaoOkBusca.jpg' ~ alinha=h##

Após isso, iremos aplicar nosso script em jQuery:

<script>

$(function () {
 $('#BTexto').attr('value','Buscar por produtos');    // Atribuímos o value à busca
 $('#BTexto').focus(function () {       // Se o usuário clicar na busca, entra nessa verificação
  if(this.value== Buscar por produtos'') {        // Verificamos se o value é o mesmo ao qual atribuímos acima
   $('#BTexto').removeAttr('value');     // Se sim, ele remove o value para que o campo de busca fique limpo para o usuário digitar
  }
 });
 $('#BTexto').blur(function () {       // Quando o usuário sair da busca, entra nessa verificação
  if(this.value=='') {            // Verificamos se a busca está em branco
   $('#BTexto').attr('value', Buscar por produtos' ');  // Se sim, voltamos com o value que atribuímos no começo do nosso script
  }
 }); 
});
</script>

Simples, não?

Até a próxima!