Como impedir o enter de dar submit
Neste artigo você vai aprender como impedir o enter de dar submit, ou seja, não deixar o formulário ser enviado quando o usuário utilizar a tecla enter
Fala programador(a), beleza? Bora aprender mais sobre como impedir que o enter envie o formulário, de uma forma simples!
A ideia aqui é captar o evento de enter, então quando o usuário pressionar vamos impedir o evento padrão
E qual é este evento padrão? Que o formulário seja enviado!
Para esta ação temos o método preventDefault, que corta os eventos padrões de algum outro elemento
Veja um exemplo prático ensinando a resolver o problema:
document.addEventListener("keydown", function(e) { if(e.keyCode === 13) { e.preventDefault(); } });
Aqui temos várias coisas acontecendo, vamos explicar detalhe por detalhe, mas é interessante você saber que com apenas este código o enter não vai mais enviar o formulário 😀
Na primeira linha estamos adicionando um evento de keydown ao documento
Ou seja, sempre que for apertada uma tecla, teremos um evento sendo disparado no DOM
Depois verificamos se a tecla apertada é o enter, que tem o código de 13, com a comparação de keyCode
Caso seja enter, impedimos o evento default com preventDefault, e como dito anteriormente o evento default é o envio do formulário, legal né?
Conclusão
Neste artigo vimos como impedir o enter de dar submit
Basicamente criamos um evento em document que mapeia todas as teclas que são apertadas no nosso site
E então quando identificamos que é o enter, removemos o envio do form, que é o evento padrão
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube