0

Como que eu faço um tipo de click para um input sem utilizar botão? Por exemplo, eu vou clicar no input digitar o que eu quero procurar e quando pressionar ENTER o formulário será enviado. Como que eu faço isso com jQuery?

<input type="text" placeholder="Buscar" id="buscar" name="q" />
3
  • sim eu tenho a parte em php que retorna o que escrever nesse input vc quer que eu poste? Commented 19/12/2015 às 1:31
  • nao estou fazendo esta parte por ajax eu apenas queria verificar pra nao deixar passar em branco apenas isso o resto pode ficar do modo que esta Commented 19/12/2015 às 1:37
  • tipo eu sei verificar mas com um botao sem o botao so assim nao sei como que tipo forca um click sem o botao Commented 19/12/2015 às 1:38

2 Respostas 2

3

Da maneira abaixo ele vai verificar se algo foi escrito por meio da expressão regular /\w/, que ignora os espaços em branco.

Exemplo editado:

$("#buscar").on("blur", function(e) {
  verify(e);
});
$("#buscar").on("keypress", function(e) {
  if (e.keyCode == 13) {
    verify(e);
  }
});

function verify(e) {
  if (!(/\w/.test($("#buscar").val()))) {
    e.preventDefault();
    $('p').html('Preencha algo!');
  } else {
    $('p').html('');
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="">
  <input type="text" id="buscar">
</form>
<p></p>

Eu usei a função blur() que é acionada ao usuário retirar o foco da input. Mas caso prefira o click, basta colocar .on("click",.

17
  • mas desse modo ele incia a busca ele abre o meu arquivo php nao sei se programei certo pq tipo eu quero que quando clicado ele vai verificar se tem algo digitado se nao tiver algo digitado ele nao faz nd Commented 19/12/2015 às 1:44
  • $("#buscar").on("keypress", function(e){ var busca = $("#buscar").val(); if(e.keyCode == 13){ if(busca == ""){ alert("test"); return; } $("form").submit(); //Seu form será submetido } }); Commented 19/12/2015 às 1:44
  • seria desse modo que eu fiz verifiquei antes do submit Commented 19/12/2015 às 1:46
  • hum.. Imagino que tenha entendido. Mas @LeonardoCosta, a função click em uma ciaxa de texto é um tanto estranha, será que você não prefere um blur? Commented 19/12/2015 às 1:47
  • Irei editar a resposta com alguns exemplos adicionais. Commented 19/12/2015 às 1:47
1

Você não precisa capturar se o ENTER foi digitado no input, pois quando a tecla enter é pressionada dentro de um elemento de entrada em um formulário, por padrão o formulário será enviado.

O que você precisa fazer é prevenir que o formulário seja enviado e para isto pode usar o event#preventDefault():

$(function() {
  
  $('#buscar').on('submit', function(event) {
    // Prevenindo a ação padrão (enviar o formulário).
    event.preventDefault();

    // Pegando o valor inserido no input.
    var searchFor = $(this).find('input').val();

    if (!searchFor) {
      alert("Form ñ enviado porque...");
    } else {
      alert("Form enviado.");
      // $(this).submit();
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!--
  - Trocando o '#buscar' para o formulário, ao invés do input.
  -->
<form id='buscar'>
  <input type='search' placeholder='Buscar por...' />
</form>

1
  • 1
    Uma ótima opção! Commented 19/12/2015 às 2:46

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 .