2

Como posso fazer uma submissão com ajax usando a tecla enter? Ou seja, possuo o seguinte código:

 var nome = $("#nome").val();
 jQuery.ajax({
	            method: "get",
	            url: "teste.php",
	            data: { "nome": nome },
	            success: function(data){
	                alert("Enviado com Sucesso!");
	            }
        	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Nome: <input type="text" name="nome" id="nome" placeholder="Digite seu Nome">
<button>Enviar</button>

Como posso fazer, para que ao estar focado no input quando for pressionado a tecla enter seja submetido?

1 Resposta 1

2

Podes fazer assim:

$('#nome').on('keyup', function(event) {
  if (event.which !== 13) return;
  var nome = this.value;
  jQuery.ajax({
    method: "get",
    url: "teste.php",
    data: {
      "nome": nome
    },
    success: function(data) {
      alert("Enviado com Sucesso!");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Nome: <input type="text" name="nome" id="nome" placeholder="Digite seu Nome">
<button>Enviar</button>

O importante é procurar o código da tecla que foi pressionada, 13 para Enter.

Explicação:

  • $('#nome').on('keyup', function(event) { - quando o elemento com o ID nome receber o input de uma tecla (no momento de largar a tecla) esse corre uma função

A função chamada pelo .on('keyup' recebe automaticamente o argumento event que contém informação sobre o evento do teclado, neste caso o numero da tecla pressionada. Se o event.which for 13 esse é o código da tecla enter e sabemos então que essa tecla foi pressionada.

Essa função tem como this o elemento que recebeu o evento. Por isso o this.value dá-nos o valor atual do elemento.

5
  • Você pode explicar como funciona o código?Pelo menos este código: $('#nome').on('keyup', function(event) { if (event.which !== 13) return; var nome = this.value; Commented 17/09/2017 às 12:11
  • @CarlosHenrique sim, claro! 1 min
    – Sergio
    Commented 17/09/2017 às 12:15
  • @CarlosHenrique atualizei agora!
    – Sergio
    Commented 17/09/2017 às 12:19
  • o .wich o que significa? E para que serve? Commented 17/09/2017 às 12:19
  • 1
    @CarlosHenrique esse event é um objeto que o JavaScript nos dá. O jQuery dá mais algumas propriedades a esse objeto, neste caso o which é uma propriedade nativa mas que o jQuery normaliza. Ou seja, em alguns browsers que não têm esse which o jQuery dá-lhe um valor na mesma, para ser sempre o mesmo em qualquer browser. Se usares código nativo o event.key é mais correto. Mas em jQuery o .which é o que deves usar.
    – Sergio
    Commented 17/09/2017 às 12:26

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 .