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
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!