Hack de caixa de pesquisa

O que muitos pensam a respeito de caixas de pesquisa, é o de que sempre terão de apagar os dados, tais como textos ou as imagens inseridas dentro delas, para poder fazer a pesquisa, veja um exemplo:

Apague os dados e clique em enviar >.

 

O código desta caixa de pesquisa seria:

<form action='#' method='get'>
<input id='caixa1' maxlength='100' size='25' type='text' value='Pesquisar'/>
<input type='submit' onclick="/search" value='Enviar &gt;'/>
</form>

Conforme a situação pediu, resolvi colocar este método para implementar nosso blog(e para não torrar a paciência do visitante), podendo também ser implementado em sites, teste o resultado final:

 

O código desta caixa de pesquisa seria:

<form action='/search' method='get'>
<input id='s' maxlength='100' name='q' onblur='if (this.value == "") {this.value = "Pesquisar";}' onfocus='if (this.value = "Pesquisar") {this.value = "";}' size='25' type='text' value='Pesquisar'/>
<input type='submit' onclick="/search" value='Enviar &gt;'/>
</form>

Este é o hack para implementarmos nosso site:

onblur='if (this.value == "") {this.value = "Pesquisar";}' onfocus='if (this.value = "Pesquisar") {this.value = "";}'

Passo-a-Passo: Localize sua caixa de pesquisa e implemente o código acima.

Procure por um destes trechos no seu Painel > Layout > Editar HTML:

Texto que aparece no botão de pesquisa, geralmente é "pesquisar"

Texto que aparece dentro da caixa de pesquisa, geralmente é "pesquisar"

Id do elemento.

Localizado o trecho no Editar HTML, visualize a parte do código da caixa de pesquisa, iniciado em <input , contendo o atributo: type='text'

Implemente o código abaixo após o <input :

Para sites:

onblur='if (this.value == "") {this.value = "Pesquisar";}' onfocus='if (this.value = "Pesquisar") {this.value = "";}'

Para Blogger (no Editar HTML):

onblur='if (this.value == &quot;&quot;) {this.value = &quot;Pesquisar&quot;;}' onfocus='if (this.value = &quot;Pesquisar&quot;) {this.value = &quot;&quot;}'

Ficando da seguinte maneira:

Para sites.

<input onblur='if (this.value == "") {this.value = "Pesquisar";}' onfocus='if (this.value = "Pesquisar") {this.value = "";}' [... continuação do código ...]/>

 

Para Blogger

<input onblur='if (this.value == &quot;&quot;) {this.value = &quot;Pesquisar&quot;;}' onfocus='if (this.value = &quot;Pesquisar&quot;) {this.value = &quot;&quot;}' [... continuação do código ...]/>

Teve algum problema de implementação? Comente abaixo com o nosso formulário e ajude quem teve o mesmo problema que o teu!

Não se esqueça:
[...continuação do código...]/> significa que o código continua, não é necessário colar junto, servindo apenas de orientação
Visualize primeiro antes de salvar, provavelmente o hack não funciona mas, assim que clicado em visualizar e a página carregar podera ser feito o processo de gravação (salvar)

Share this

Related Posts

Previous
Next Post »

10 comentários

comentários
Anônimo
14/09/2009, 07:58 delete

valeu.....:)

Reply
avatar
08/04/2011, 22:54 delete

Estou com este problema no meu inscrever no feedburner, vc poderia me ajudar?
psbitabuna.blogspot.com

Reply
avatar
09/04/2011, 00:40 delete

Olá Franklin Sousa: Visualizei sua página, o problema é que no seu código possui uma série de "desarmes de cliques" é por isso que não conseguimos sequer selecionarmos o texto.
Proceda da seguinte maneira: Entre no 'Editar Html' > Salve seu modelo (caso haja erros poderá restaurar) > Retire do seu código, está logo no inicio:

<script type='text/javascript'>
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
</script>



Caso não queira apagar,
Insira "/*" e "*/" como abaixo:

<script type='text/javascript'>
/*
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
*/
</script>

Tem mais alguns desativadores, mas este é o mais importante.

Reply
avatar
09/04/2011, 01:16 delete

Opa Daniel, obrigado pela ajuda
fiz o que orientou, deletei o trecho. Já melhorou, agora consigo selecionar tudo e deletar na caixa da barra lateral do cadastrar no feedburner.
Contudo não está igual a caixa da barra lateral do pesquisar, que ao clicar o conteudo desaparece.
Outra coisa, se não for abuso, copiei um widget para compartilhar, esta acima do pesquisar, ele esta funcionando, exceto na opção do orkut, vc consegue visualizar o motivo, há como corrigir?
Obrigado novamente pela ajuda
Franklin

Reply
avatar
09/04/2011, 11:57 delete

Olá novamente Franklin, localizei mais um desativador de seleção e clique em seu blog:

Você pode apagar este trecho:
(Salve seu template antes.)

<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
//if IE4+
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>


Ou incluir os " /* " e " */ " no inicio e fim de cada função para desarmá-lo:


<script language='JavaScript1.2'>
function disableselect(e){
/*
return false
*/
}
function reEnable(){
/*
return true
*/
}
//if IE4+
/*
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
*/
}
</script>


Quanto ao Widget que contém o link para enviar ao Orkut foi testado com o Firefox 4.0 e no Internet Explorer 8 (neste funcionou o Hack da caixa de pesquisa) aqui funcionou perfeito. Qual o navegador que está utilizando?

Com uma observação, a maioria dos sites que funcionam em Firefox funcionam nos navegadores Chrome, Safari e Opera.

Caso continue dando problemas eu sugiro que troque seu template, já que ele possuí vários tipos de incompatibilidade (por causa dos scripts excessivos), como foi percebido.

Reply
avatar
10/04/2011, 13:15 delete

Grande Daniel, olá!
Obrigado novamente pela disposição em me ajudar.
Fiz o que vc orientou novamente e continua do mesmo modo (conteudo da caixa cadastrar no feedburner não desaparece ao clicar na caixa.
Quanto ao compartilhar no orkut, aqui comigo ainda não funcionou, uso firefox 3.6.16 e no internet explorer 8, mas se funcionou contigo o problema é comigo, rs.
Abraços!

Reply
avatar
10/04/2011, 13:56 delete

Franklin, aqui funcionou normalmente o campo de pesquisa (era esse que eu tava vendo) =X

Mas da mesma forma foi bom, já desabilitou os hacks de cópia e seleção, vamos lá:

Procure no Editar Html ou no widget que não está funcionando(provavelmente):

<input style="width: 180px;" name="email" value="Digite seu email aqui" type="text">

Insira o que está em negrito:

<input onblur='if (this.value == &quot;&quot;) {this.value = &quot;Digite seu email aqui&quot;;}' onfocus='if (this.value = &quot;Digite seu email aqui&quot;) {this.value = &quot;&quot;}' style="width: 180px;" name="email" value="Digite seu email aqui" type="text">

Agora o campo de pesquisa e o de Assinar por E-mail estão funcionando =)

Reply
avatar
10/04/2011, 21:16 delete

Grande Daniel, vc entende mesmo da maciota html, rsrsrs!
Agora funcionou perfeito!
Era o que eu tinha imaginado, um comando direto no widget (este onblur/onfocus que eu não sabia como fazer,rs).
Obrigado novamente, continue assim e sua página se tornará referência para todos os blogueiros amadores que levam seus blogs a sério!

Reply
avatar
01/08/2012, 15:05 delete

Consegui no blogger, mas tive que mudar ' por "" aí deu certo. Vlw pela dica

Reply
avatar

Todos os comentários serão moderados, aguarde a publicação.

Outros assuntos ou solicitações pessoais devem ser feitas por meio do formulário de contato.