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

impedir o enter de dar submit capa

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

Inscrever-se
Notificar de
guest

3 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários
RIVALO

funcionou, meus parabéns pela dica.

Battisti

que bom Rivalo!

luiz

Top, mas se eu quiser apanas de um campo, inves do form inteiro?