Como detectar o enter com JavaScript

Neste artigo você vai aprender a como detectar o enter com JavaScript, ou seja, criar um evento a partir da tecla enter

Fala programador(a), beleza? Bora aprender mais sobre eventos, DOM e também JavaScript!

Para criar um evento a partir da ação de pressionar um enter, por parte do usuário do nosso sistema, precisamos utilizar o método addEventListener no document

Ou seja, a página estará esperando um evento, que é o do Enter

O nome do evento que mapeia as teclas é o keypress, vamos utilizá-lo

E então checamos a key enviada pelo evento, que é a Enter (com E maiúsculo)

Esta chave representa o envio de um enter pelo usuário

Veja um exemplo prático do que foi explicado:

document.addEventListener("keypress", (e) => {
    if (e.key === "Enter") {
        console.log("Enter pressionado!")
    }
});

Se você adicionar o código acima ao seu projeto, todos os enter’s serão logados no console

E desta forma conseguimos executar alguma lógica baseada em um input de enter pelo usuário

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

Conclusão

No artigo de hoje vimos como detectar o enter com JavaScript

Utilizamos o método addEventListener no document, ou seja, qualquer evento será monitorado a partir de então, do tipo keypress

E então verificamos se a key enviada é o Enter, se sim executamos alguma lógica

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

keydown ou keypress: qual usar?

Aqui vale a parada pra explicar uma coisa que confunde muita gente

O keypress só se dá bem com teclas que produzem caractere

Teclas como Esc, setas, Delete e companhia simplesmente passam batido por ele

Já o keydown escuta QUALQUER tecla no momento em que ela é pressionada, inclusive o Enter

Por isso o keydown virou o padrão pra esse tipo de detecção, é o caminho mais previsível:

document.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
console.log("Enter pressionado!")
}
});

Repara que muda uma palavra só, o resto da lógica é idêntico

Se o teu código antigo usa keypress e funciona, ele não vai explodir hoje

Mas em código novo, vai de keydown e tu evita dor de cabeça com tecla que não dispara nada 🙂

E o famoso e.keyCode === 13?

Se tu já pesquisou isso antes, com certeza esbarrou em código assim

O 13 é o código numérico do Enter, e por anos foi o jeito de fazer

Porém o e.key resolve a mesma coisa sendo MUITO mais legível

"Enter" tu bate o olho e entende, 13 tu precisa decorar ou ir no Google conferir

Então a comparação por key é o que tu deve escrever hoje:

// jeito antigo
if (e.keyCode === 13) { }

// jeito atual
if (e.key === "Enter") { }

Tome cuidado com o E maiúsculo, "enter" minúsculo não bate com nada e tu vai ficar meia hora achando que o listener quebrou (já me ferrei com isso haha)

Como detectar o enter em um input específico:

O exemplo lá de cima escuta o document inteiro

Ou seja, o usuário aperta Enter em QUALQUER canto da página e a tua lógica roda

Na maioria dos casos reais não é isso que tu quer, tu quer o Enter dentro de um campo

Aí é só trocar o alvo do addEventListener:

const input = document.querySelector("#busca");

input.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
console.log("Buscando por:", e.target.value)
}
});

Repara no e.target.value, ele te entrega o que foi digitado no campo naquele instante

É com isso que tu monta busca, filtro, envio de mensagem e por aí vai

Caso apareça um erro de null no console, quase sempre é o script rodando antes do HTML existir

Joga o script pro final do body ou usa o atributo defer, resolve na hora

Enter dentro de formulário: evitando o reload da página

Se liga nisso, é o pega mais comum do assunto

Quando o input está dentro de um form, o Enter dispara o envio nativo

Resultado: a página recarrega e o teu console.log some antes de tu ler 😛

Pra segurar isso, usa o preventDefault:

const form = document.querySelector("#form");

form.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
e.preventDefault()
console.log("Enter capturado, sem recarregar")
}
});

O preventDefault cancela o comportamento padrão do navegador pra aquele evento

Aí o Enter passa a fazer só o que TU mandou ele fazer

Se o teu objetivo for justamente enviar o form, o caminho mais limpo é escutar o evento submit em vez do Enter, o navegador já faz esse trabalho por ti

Enter envia, Shift + Enter quebra linha:

Esse é o comportamento que tu vê em todo chat da vida

Enter manda a mensagem, Shift + Enter pula linha dentro do textarea

E dá pra fazer isso com uma condição a mais, porque o evento carrega o estado das teclas modificadoras:

const textarea = document.querySelector("#mensagem");

textarea.addEventListener("keydown", (e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault()
console.log("Enviar:", e.target.value)
}
});

O e.shiftKey é um booleano, ele te diz se o Shift estava segurado na hora da tecla

Com o ! na frente a gente lê assim: é Enter E o Shift NÃO está pressionado, então envia

Quando o Shift está segurado a condição falha, o preventDefault não roda e o textarea quebra a linha sozinho

Mesma ideia vale pro e.ctrlKey, e.altKey e e.metaKey, dá pra montar teu atalho do jeito que quiser

E no React?

Se tu trabalha com React, a lógica é a MESMA, muda só onde tu pendura o evento

Em vez de addEventListener na mão, tu usa a prop onKeyDown direto no elemento:

<input onKeyDown={(e) => {
if (e.key === "Enter") {
console.log("Enter no React")
}
}} />

O objeto do evento que chega ali tem o key, o shiftKey e o preventDefault igualzinho

Então tudo que tu viu nos blocos acima continua valendo

Se precisar escutar o document inteiro dentro de um componente, aí sim usa o addEventListener dentro do useEffect e lembra de remover o listener na limpeza, senão tu acumula listener a cada render e a coisa começa a disparar repetido