Como Enviar um Formulário Pressionando Enter Sem um Botão de Enviar
Resposta Rápida
Se o seu formulário não tiver um botão de enviar visível e você quiser enviá-lo pressionando Enter, basta adicionar um elemento <input> ao seu formulário. Assim que o foco estiver no campo de entrada, pressionar Enter enviará o formulário — esse é o comportamento padrão dos navegadores.
<form action="submit">
<input type="text" name="campo">
<!-- Este botão será tão discreto quanto um ninja na noite -->
</form>Tente posicionar o cursor no campo de entrada e pressionar Enter — o formulário será enviado, e você não verá nenhum botão.
Usando o Atributo hidden para Criar Invisibilidade
Se você deseja alcançar um efeito de invisibilidade que rivalize com os truques de Houdini, use um botão de enviar invisível com o atributo hidden.
<form action="submit">
<input type="text" name="campo">
<input type="submit" hidden>
<!-- É como uma desaparecimento sobrenatural! -->
</form>O formulário incluirá um botão, mas ele estará escondido do usuário como se estivesse envolto em uma capa de invisibilidade.
Limites de Acessibilidade
Lembre-se, mesmo que o botão não seja visível, leitores de tela podem "ver" ele. Seja considerado com todos os usuários: a acessibilidade é a chave para um desenvolvimento bem-sucedido.
E os Navegadores Mais Antigos?
E se seus usuários estiverem usando navegadores mais antigos, como o IE7? Nesse caso, você pode aproveitar a propriedade CSS position: absolute para garantir a funcionalidade.
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1">
<!-- Com a gente sempre está o ninja do CSS! -->O atributo tabindex="-1" ajuda a esconder o elemento da navegação utilizando a tecla Tab.
Desenvolvimento para Todas as Condições
Seus formulários funcionarão mesmo que o CSS "tire férias". Considere uma abordagem "fora da vista" quando precisar ocultar um elemento da interface.
Maestria para Todas as Ocasiões
Ter conhecimento de JavaScript e jQuery dará um toque de mágica ao trabalhar com a tecla Enter, mas um verdadeiro mestre pode se virar sem eles.
$('form').on('keypress', function(e) {
if (e.keyCode === 13) {
$(this).submit();
/* Um toque de magia: pressione Enter e o formulário é enviado! */
}
});No entanto, lembre-se de que o usuário pode ter o JavaScript desativado.
A Importância dos Testes
Lembre-se de que diferentes dispositivos e navegadores podem responder de maneira diferente às suas ações. Testes minuciosos garantem que os elementos ocultos da interface funcionem como desejado.
Considerando a Diversidade de Dispositivos
A diversidade de dispositivos vai além de apenas navegadores antigos. Existem também smartphones e tablets, cada um afetando o comportamento da interface à sua maneira. Certifique-se de levar isso em conta no desenvolvimento dos testes.
Visualização
Vamos visualizar o processo de envio do formulário ao pressionar Enter através de uma metáfora de corrida:
Imagine uma corrida em uma pista (🏁) com diferentes faixas (🛣️):
Faixa 1: [🔳📩(Campo de Entrada) -> 🏁(Finalização/Tecla Enter)]
Faixa 2: [🔲🚫(Sem Botão de Enviar) -> 🏃💨(Enter Automático)]
Faixa 3: [🚩(Início) -> ...⌨️(Usuário digita)... -> 🏁(Pressionando Enter para Finalizar)]Em outras palavras:
- O usuário preenche o campo do formulário (🔳 📩)
- Não há botão de enviar visível no formulário (🔲🚫)
- O usuário pressiona `Enter` (🏁), e o formulário é imediatamente enviado (🏃💨)É como se você estivesse vendo a linha de chegada: enviar o formulário é tão fácil quanto pressionar Enter, mesmo que o disparo inicial (botão visível) ainda não tenha acontecido.
Recursos Úteis
<form>: Elemento de Formulário - MDN — você encontrará muitas informações úteis sobre o elemento<form>na MDN Web Docs.- Como Acionar um Clique de Botão Pressionando a Tecla Enter — visite a W3Schools para aprender como criar um formulário sem um botão de enviar visível.
- JavaScript - Função ao Pressionar a Tecla Enter em
<input>- Stack Overflow — quer se tornar um mago do JavaScript? Dê uma olhada nesta discussão no Stack Overflow e domine a mágica do código. - Padrão HTML — ganhe conhecimentos valiosos com este trabalho abrangente, incluindo uma seção dedicada ao algoritmo de envio de formulários. Fonte: Padrões W3C de HTML.
- Enviando um Formulário Pressionando Enter Sem um Botão de Enviar - Stack Overflow — o Stack Overflow tem dicas úteis sobre como enviar um formulário pressionando
Enter. - Treinamento em Manipulação de Formulários - web.dev — no web.dev você descobrirá as melhores práticas para trabalhar com formulários em HTML.