14.03.2025

Submetendo um Formulário HTML ao Pressionar Enter Sem um Botão de Enviar

Resposta Rápida

Para uma solução simples ao seu pedido—submeter um formulário ao pressionar a tecla Enter—você só precisa adicionar um elemento <input type="submit"> ao formulário. Essa abordagem funciona na maioria dos navegadores, que iniciam automaticamente a submissão quando essa ação é realizada, desde que um campo de submissão seja detectado no formulário. Aqui está um exemplo de um formulário básico:

<form action="/caminho-de-submissao">
  <input type="text">
  <input type="submit" hidden>
</form>

Esconder o botão com type="submit" permite que a submissão do formulário seja iniciada sem exibir o botão em si.

JavaScript Para Controle Adicional

Se, por algum motivo, você precisar de mais controle ou desejar implementar recursos adicionais, como validação de dados, você pode usar JavaScript para estender o comportamento padrão do navegador.

document.addEventListener("DOMContentLoaded", function() {
  var form = document.getElementById("meuFormulario");
  form.addEventListener("keypress", function(e) {
    if (e.keyCode == 13) {
      e.preventDefault(); // Evita a submissão padrão do formulário
      if (form.checkValidity()) {
        form.submit(); // Submete o formulário se todas as validações passarem
      }
    }
  });
});

<form id="meuFormulario" action="/caminho-de-submissao">
  <input type="text" required>
  <input type="submit" class="botao-invisivel" hidden>
</form>

Usando a classe .botao-invisivel, garantimos que o botão permaneça invisível:

.botao-invisivel { 
  position: absolute;
  left: -9999px;
  visibility: hidden;
}

Compatibilidade entre Navegadores e Acessibilidade

É importante cuidar não apenas do suporte em diferentes navegadores, mas também da acessibilidade do site para diversos grupos de usuários. Por esse motivo, usar style="display: none" para tais fins não é a melhor prática, pois pode causar problemas de compatibilidade em navegadores mais antigos e com leitores de tela.

Um método alternativo e mais eficaz é usar visibility: hidden ou mover elementos para fora da área visível, como mostrado acima. Isso também previne problemas ao navegar com o teclado, especialmente se o valor de tabindex for definido como -1.

Mantendo o Estilo Visual

Às vezes, surge a questão de como tornar um botão funcional e invisível, mantendo-o integrado dentro do documento. Nesse caso, você pode estilizar um <button> para parecer um div, enquanto mantém todas as capacidades funcionais.

<button type="submit" class="botao-como-div">Enviar</button>

.botao-como-div {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-size: 1em;
  color: inherit;
}

Visualização

Vamos ilustrar o pressionar da tecla Enter com uma metáfora vibrante 🏎️:

Pressionar a tecla Enter (ou retorno)...

🏎️💨 + 🏁 = 🎯

...pode ser comparado a pisar no acelerador! Seu formulário acelera em direção ao servidor, carregando os dados inseridos.

Lista de Verificação para Submissão Eficaz

• Validação de Dados do Formulário: Sempre verifique a correção dos dados antes da submissão.
• Utilize JavaScript para gerenciar submissões com base nos códigos de tecla.
• Mantenha o conteúdo do seu formulário atualizado; use HTML padrão para cenários em que JavaScript está desativado.
• Adira às especificações HTML5 e diretrizes modernas.

Tratando Casos Especiais

• Autocompletar: Considere a possibilidade de submissão automática de formulários ao usar recursos de autocompletar do navegador.
• Anomalias dos Navegadores: Esteja ciente dos diferentes comportamentos da tecla Enter em vários navegadores.
• Melhoria Progressiva: Garanta que as funções básicas do formulário funcionem sem JavaScript. Isso servirá como base para melhorias adicionais.

Cenários Práticos

• Assegure suporte para submissões de formulários em navegadores desatualizados.
• Otimize formulários para dispositivos móveis, permitindo que o botão "Ir" emule a tecla Enter.
• Utilize AJAX para submissão de dados sem necessidade de recarregar a página.

Recursos Úteis

1. <form>: O Elemento do Formulário - HTML: HyperText Markup Language | MDN — Visão geral da funcionalidade dos elementos de formulário HTML.
2. Elemento: evento keypress - Web APIs | MDN — Guia sobre como lidar com eventos keypress em JavaScript.
3. Aprenda Formulários | web.dev — Recurso educacional sobre formulários HTML e métodos de otimização.
4. JavaScript DOM EventListener — Guia sobre como adicionar e gerenciar ouvintes de eventos em JavaScript.
5. Valor do KeyboardEvent (keyCodes, metaKey, etc) | CSS-Tricks — Referência para códigos de tecla em JavaScript.
6. Padrão HTML — Seção sobre formulários HTML5 no padrão HTML.
7. evento submit | Documentação da API jQuery — Documentação sobre o evento de submissão na biblioteca jQuery.

Video

Navigation