0

Preciso que seja mostrado um preloader após a tecla 'Enter' ser pressionada numa caixa de pesquisa. Cheguei a conclusão abaixo, mas não funciona. Conseguem me dar uma ajuda?

        <div id="preloader">
        <div class="inner">
           <div class="">
              <div></div>
              <div></div>
              <div></div>                    
           </div>
        </div>
    </div>

     <div class="x-searchform-overlay">

        <div class="x-searchform-overlay-inner">
          <div class="x-container max width">
           <?php     echo get_product_search_form(); ?>
          </div>
        </div>
      </div>


 <script>

$(document).keyup(function(e) {
    e.preventDefault();
    if(e.which == 13 || e.keyCode == 13) {
       $('.preloader').hide();
   }
}); 

</script>    
5
  • Antes do if insira e.preventDefault(); e veja se funciona. Commented 14/03/2019 às 19:59
  • Nenhuma mudança..
    – gnoronha
    Commented 14/03/2019 às 20:02
  • Como está sua classe .preloader. O que exatamente não está funcionando. Edita a sua pergunta e coloca mais alguns detalhes. Commented 14/03/2019 às 20:10
  • Atualizei a pergunta.
    – gnoronha
    Commented 14/03/2019 às 20:12
  • Aqui $('.preloader').hide(); não deveria ser $('.preloader').show(); Commented 14/03/2019 às 20:20

2 Respostas 2

0

O problema é que o seu .preloaderé um id e não uma class.

você precisa inserir o jquery para funcionar:

Seu código tem que mais ou menos assim:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <script>

$(document).keyup(function(e) {
    e.preventDefault();
    if(e.which == 13 || e.keyCode == 13) {
       $('#preloader').show();
   }
}); 

</script> 

O certo é colocar entre a tag <head>:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

Exemplo:

        $(document).keyup(function(e) {
            e.preventDefault();
            if(e.which == 13 || e.keyCode == 13) {
               alert("Apertou Enter");
           }
        }); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>CLIQUE AQUI E APERTE O ENTER</p>

E se for para mostrar, como dito pelo @Deividson você precisa usar o show():

   if(e.which == 13 || e.keyCode == 13) {
       $('#preloader').show(); // <-- show() mostra a div
   }
5
  • Já testei de várias formas, na verdade... Tentei com class, com id...
    – gnoronha
    Commented 14/03/2019 às 20:27
  • Erro - TypeError: $ is not a function[Learn More]
    – gnoronha
    Commented 14/03/2019 às 20:30
  • 1
    Você referenciou o Jquery? Commented 14/03/2019 às 20:36
  • era isso que ia falar Commented 14/03/2019 às 20:37
  • hm... não sei dizer.. como devo fazer essa referência?
    – gnoronha
    Commented 14/03/2019 às 20:40
-1

e.which == 13 || e.keyCode == 13

1
  • Obrigado amigo! Mas ainda não deu certo...
    – gnoronha
    Commented 14/03/2019 às 20:30

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 .