1

Oi estou fazendo a barra de pesquisa do site e o modelo da barra e assim: tem uma imagem de uma lupa e quando clicar na imagem, embaixo dela aparece o input para digitar a pesquisa. Estou fazendo isso em JavaScript mas estou tendo problemas. Acontece assim quando eu clico aparece o input mais quando clico fora ele continua lá, como posso fazer ele desaparecer tentei usar if e else, for loops mais não consegui nada. Alguem poderia me ajudar? Obrigado!

<script>
function mostrarPesquisa(){
  document.getElementById('pesquisa').style.display="inline-block";
 }
</scripit>

  <div id="menu">
    <div id="dentromenu">
        <ul class="menu">
            <li class="activeItem"><a><img class="lupa" src="imagens/lupa.png" alt="Lupa" onClick="mostrarPesquisa()"></a>
                <div id="caixapesquisa">
                    <form id="formpesquisa" action="" method="get">
                        <input id="pesquisa" class="pesquisa" type="text" value="" maxlength="" placeholder="Pesquisar..."><input id="btnpesquisa" type="hidden" src="imagens/lupa.png" value=""> 
                    </form>
                </div>
            </li>
3
  • 1
    Não seria display = "none"?
    – Laerte
    Commented 21/10/2015 às 19:05
  • 1
    Coloque mais informações sobre seu código, o ideal seria colocar também o html.
    – abfurlan
    Commented 21/10/2015 às 19:06
  • Sim mais quando coloco o display none, e clico fora o input continua la, o que e bem estranho. Commented 21/10/2015 às 19:07

2 Respostas 2

3

Você vai precisar de 2 eventos:

1) onclick na imagem da lupa. Ao clicar, altere a propriedade display do input para ele aparecer na página (aparentemente, seu código já faz isso)

2) onblur no input de pesquisa. O evento onblur é executado quando o elemento perde o foco. Dessa forma, quando o input perder o foco, mude a propriedade display para none

Altere no seu HTML:

<input id="pesquisa" class="pesquisa" type="text" value="" maxlength="" placeholder="Pesquisar..." onblur="esconderCampoPesquisa()">

e adicione essa função:

function esconderCampoPesquisa() {
   this.style.display = 'none';
}

Obs: Seu elemento input deve estar inicialmente escondido. Adicione uma classe CSS para ele, setando o display para none

1
  • Cara muito obrigado funcionou! Commented 21/10/2015 às 19:30
2

Pode usar um EventListener:

document.getElementById("pesquisa").addEventListener("blur", myFunction);

function myFunction() {
    document.getElementById("pesquisa").style.display = "none";
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .