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 >.
<input id='caixa1' maxlength='100' size='25' type='text' value='Pesquisar'/>
<input type='submit' onclick="/search" value='Enviar >'/>
</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:
<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 >'/>
</form>
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 == "") {this.value = "Pesquisar";}' onfocus='if (this.value = "Pesquisar") {this.value = ""}'
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 == "") {this.value = "Pesquisar";}' onfocus='if (this.value = "Pesquisar") {this.value = ""}' [... 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)
10 comentários
comentáriosvaleu.....:)
ReplyMassa!
ReplyVlw brother.
Estou com este problema no meu inscrever no feedburner, vc poderia me ajudar?
Replypsbitabuna.blogspot.com
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.
ReplyProceda 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.
Opa Daniel, obrigado pela ajuda
Replyfiz 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
Olá novamente Franklin, localizei mais um desativador de seleção e clique em seu blog:
ReplyVocê 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.
Grande Daniel, olá!
ReplyObrigado 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!
Franklin, aqui funcionou normalmente o campo de pesquisa (era esse que eu tava vendo) =X
ReplyMas 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 == "") {this.value = "Digite seu email aqui";}' onfocus='if (this.value = "Digite seu email aqui") {this.value = ""}' 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 =)
Grande Daniel, vc entende mesmo da maciota html, rsrsrs!
ReplyAgora 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!
Consegui no blogger, mas tive que mudar ' por "" aí deu certo. Vlw pela dica
ReplyTodos 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.