Neste artigo você vai aprender a como detectar o Enter em um input, ou seja, quando o usuário pressinar o tecla enter em um campo de formulário
Fala programador(a), beleza? Bora aprender mais sobre DOM em JavaScript!
Esta ação é bem simples, e une dois conceitos importantes de DOM
Primeiramente vamos selecionar o elemento, que neste caso é um input
Depois vamos observar um evento de keyup nele, que será onde mapearemos o Enter
Por fim, buscamos pela key com nome de “Enter” na propriedade key do evento
Veja um exemplo prático:
const input = document.querySelector("#my-input");
input.addEventListener("keyup", ({key}) => {
if (key === "Enter") {
console.log("Ativou o Enter!")
}
})
Na primeira linha selecionamos o elemento alvo, que é um input com o id de my-input
O método querySelector é muito interessante, pois passamos uma regra de CSS e selecionamos o elemento
Depois é adicionada a observação do evento de keyup a este elemento
Dentro temos uma checagem para identificar se a tecla pressionada foi o enter
Onde está o console.log você deve adicionar a sua lógica desejada
Conclusão
Neste artigo você aprendeu a como detectar o Enter em um input
Utilizamos o método querySelector para selecionar o elemento
Depois mapeamos o evento de keyup nele, e identificamos quando a tecla enter é pressionada por meio de um if
No if você pode adicionar o código que precisa para efetuar algo após o enter
Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!
Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os curso