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