Como detectar o Enter em um input com JavaScript

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

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

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