14.03.2025

Enviando um Formulário Usando a Tecla Enter Sem um Botão de Envio

Resumo Rápido

Para enviar um formulário usando a tecla Enter sem exibir um botão de envio, você pode utilizar a seguinte abordagem, que emprega um elemento de envio oculto:

<form action="/target">
    <input type="text">
    <!-- Um pouco de mágica com um elemento oculto... -->
    <input type="submit" hidden>
</form>

Com essa configuração, pressionar Enter no campo de texto ativa o input de envio invisível e envia o formulário, eliminando a necessidade de Javascript.

A seguir: Usando jQuery para Controle Aprimorado

A solução apresentada acima é bastante aplicável; no entanto, existem casos que requerem um controle mais meticuloso. É aqui que o jQuery entra em cena.

Gerenciando o Comportamento do Formulário com jQuery

Usando jQuery, você pode personalizar o comportamento do formulário durante o envio:

$('input[type="text"]').keydown(function(event) {
  if(event.which == 13) { 
      event.preventDefault();
      $(this).closest('form').submit();
  }
});

Este script "captura" a pressão da tecla Enter (código da tecla 13), impede o envio automático e o inicia de acordo com as instruções do desenvolvedor.

Ocultando o Botão de Envio com CSS

Há momentos em que o botão de envio do formulário precisa ser oculto. É aqui que a propriedade CSS display: none; é útil:

input[type="submit"] { 
    display: none;
}

Essa técnica ajuda a ocultar o elemento de envio enquanto ainda permite que o formulário seja enviado com a tecla Enter.

Usando o Evento Keydown para Melhor Responsividade

$('input[type="text"]').keydown(function(event) {
    if(event.keyCode == 13) {
        $(this).closest('form').submit();
    }
});

Usar o evento keydown em vez de keypress permite que o formulário responda mais rapidamente às pressões de tecla, reduzindo o atraso entre a pressão da tecla e o envio do formulário.

Uma Solução Sem Usar JavaScript

Se o JavaScript estiver desativado, você pode usar um elemento oculto para o envio:

<noscript>
    <style> .js-submit { display: block; } </style>
</noscript>
<input type="submit" class="js-submit" hidden />

Essa abordagem funciona e ativa a classe .js-submit graças à tag noscript quando o JavaScript não está disponível.

Visualização

Transformemos o teclado (⌨️) em uma ferramenta de envio de mensagens. Pressionar Enter (↵) envia um avião de papel (🛩):

[Usuário digita] 'Olá, mundo!' 🌎
[Usuário pressiona Enter ↵]  

E nosso avião decola:

⌨️ ----------> 🛩💨 ------> ✅ 'Mensagem entregue!'

Enter sem um botão de envio envia a mensagem de forma rápida e eficaz.

Gerenciando Vários Elementos: Campos de Entrada e Formulários

Quando um formulário contém múltiplos campos ou formulários, uma abordagem especial é requerida. jQuery também pode ajudar aqui.

Direcionando Formulários Específicos: Usando ID

$('#meuFormulario input').keydown(function(event) {
    if(event.keyCode == 13) {
        event.preventDefault();
        $('#meuFormulario').submit();
    }
});

Ao especificar o ID do formulário, você pode controlar precisamente seu comportamento entre outros formulários.

Encontrando o Formulário mais Próximo com jQuery

$(this).closest('form').submit();

O método closest() ajuda a encontrar e submeter o formulário mais próximo com base na posição atual do input.

Recursos Úteis

1. Verificando Restrições - HTML: Linguagem de Marcação Hipertexto | MDN — uma discussão detalhada sobre métodos de validação de formulários em HTML5.
2. Javascript - Tratando Pressão de Tecla Enter em Campo de Texto - Stack Overflow - recomendações da comunidade sobre o envio de formulários usando a tecla Enter.
3. Manipuladores de Eventos DOM em JavaScript — explorando o mecanismo de manipulação de eventos em JavaScript.
4. Evento onsubmit em HTML — uma visão geral das capacidades de manipulação de eventos de envio.
5. Estilizando Janelas Modais | CSS-Tricks — da submissão de formulários à estilização de janelas modais.
6. Padrão HTML — princípios de envio de formulários de acordo com os padrões HTML.
7. Evento Submit em jQuery — dominando a ordem de submissão do formulário usando o método .submit() do jQuery.

Video

Navigation