Acionar um button com o enter do teclado em JavaScript

Neste artigo você vai aprender a acionar um button com o enter do teclado, fazendo com que o botão seja clicado por meio de um evento JS

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Hoje você vai aprender a como ativar um botão quando o usuário pressionar o enter, tudo via JavaScript e de maneira simples!

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

A ideia central da abordagem é mapear o evento do enter quando é pressionado

Para isso vamos utilizar o evento keydown ou keypress, os dois vão funcionar perfeitamente nessa situação

Veja então o exemplo prático:

<form action="">
   <input type="text" id="name">
   <input type="submit" id="submit" value="Enviar">
</form>

Este será o nosso formulário, com um input sendo o nosso botão

A ideia é ativar ele por meio do id, então mesmo que seja outra tag é possível ativar desta maneira

Veja o JS necessário agora:

document.addEventListener("keypress", function(e) {
  if(e.key === 'Enter') {
  
  	var btn = document.querySelector("#submit");
    
    btn.click();
  
  }
});

Como estamos utilizando um evento de teclas pressionadas precisamos adicionar ele ao document

Então fazemos a verificação se a tecla pressionada é o enter

Quando é o enter que é pressionado disparamos um evento no botão, que foi mapeado na variável event

Este evento é o de click, que vai simular o usuário clicando no botão

E pronto! Resolvemos o problema 🙂

Conclusão

Neste artigo vimos como acionar um button com o enter do teclado

Criamos um evento de keypress que mapeia todas as teclas do teclado, quando o enter é identificado o evento é disparado

O evento aciona o botão por meio de um evento de click

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube