Bloquear Enter de enviar formulário com JavaScript

Neste artigo você vai aprender a como bloquear Enter de enviar formulário com JS, ignorando o pressionar da tecla Enter

Fala programador(a), beleza? Bora aprender mais sobre formulários com JavaScript!

Para resolver o nosso problema, primeiramente temos que selecionar o elemento que está enviando o formulário com o enter

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Pode ser um ou mais inputs, então você precisa avaliar o seu projeto e o que ele precisa fazer

Algumas das opções para selecionar elementos são:

• querySelector;
• querySelectorAll;
• getElementById;
• getElementsByTagName;

Vou utilizar o querySelector e exibir um exemplo de apenas um input

Depois da seleção, precisamos adicionar um evento de keydown, que é quando uma tecla é pressionada em um elemento

Como Enter é uma tecla, vamos buscar ela por meio da propriedade key, que é presente em todos os eventos

Detectando que é um Enter, vamos cancelar o envio do form, veja um exemplo de código:

const input = document.querySelector("#my-input")

input.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
        e.preventDefault();
    }
})

Note que primeiramente há a seleção, depois a atribuição do evento no input e por fim a verificação da propriedade key

Com o método preventDefault, nós inibimos o formulário de ser enviado

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você aprendeu a como bloquear Enter de enviar formulário

Utilizamos um método de seleção de elemento, e depois identificamos a tecla Enter

Ao identificá-la, bloqueamos o envio do formulário, que é um comportamento padrão

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!