27 de dez. de 2008

Campo de Busca com Texto Autolimpante

Uma caixa de pesquisa é realmente indispensável em qualquer blog. Acredito que 95% dos blogs usam caixa de busca.

Nesta postagem vou colocar o link de uma caixa de busca com texto auto limpamte - a mesma que usamos aqui no Dicas Plugins - que encontrei no Usuário Compulsivo.

O texto que aparece dentro da caixa de texto do campo de busca chama-se dica de tela, é útil para indicar a usuários leigos o local de pesquisa no blog.

Você tem duas opções:

1 - Instalar através do link abaixo:

Box com Dica Autolimpante

2 - Ou adicionar o seguinte código:

<script type="text/javascript">
function clickclear(thisfield, defaulttext) {
if (thisfield.value == defaulttext) {
thisfield.value = "";
}
}
function clickrecall(thisfield, defaulttext) {
if (thisfield.value == "") {
thisfield.value = defaulttext;
}
}
</script>
<center><form id="searchthis" action="/search" style="margin:0;padding:0;display:inline;" method="get"><input onclick="clickclear(this, 'Pesquisar neste blog')" value="Pesquisar neste blog" type="text" id="search-box" onblur="clickrecall(this,'Pesquisar neste blog')" style="color: #999;" size="20" name="q"/> <input id="search-btn" value="Buscar" type="submit"/></form>
<br/></center>

  • Para os que não sabem, se quiser alterar a largura da caixa de texto, altere o valor em size="20" por um valor maior ou menor dependendo da sua necessidade.
  • Para alterar o valor Buscar para, por exemplo, Pesquisar ou Procurar, altere o texto em value="Buscar" para o txto desejado.

1 comentários:

Anônimo disse...

Excelente tópico.
Eu tinha visto este tipo de campo de busca em um blog ha uma semana mas não encontrei o código pra usar. Passei por aqui e, de cara, me deparo com essa postagem.

Obrigado

27 de dezembro de 2008 às 18:24

Postar um comentário