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