Simular evento de keypress com código em JavaScript

Neste artigo você vai aprender a como simular evento de keypress com código em JavaScript, com recursos nativos da linguagem!

Fala programador(a), beleza? Bora aprender mais sobre a simulação de eventos com JavaScript!

Primeiro gostaria de lembrar que keypress foi depreciado, temos que utilizar eventos como keydown ou keyup, que no fim das contas vão ter o mesmo resultado para nós

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

Ou seja, o keypress é equivalente ao keydown

Para atingir os nossos objetivos vamos precisar utilizar um método chamado dispatchEvent de document, que consegue simular um evento

A partir daí criaremos uma instância de KeyboardEvent, onde escoheremos qual key será disparada

Aqui é o ponto que criamos o keydown de forma programável

Veja o código completo:

element.dispatchEvent(new KeyboardEvent('keydown', {'key': 'z'}));

Aqui estamos disparando um evento para a tecla z!

Note que eventos criados desta maneira não preenchem inputs de dados, mas isso pode ser resolvido facilmente

Basta selecionar o elemento e atribuir o valor da tecla ao atributo value do elemento, exemplo:

const input = document.querySelector("#name")
input.value += z

Este código seleciona um input e inclui a letra z nele, complementando o código do nosso primeiro exemplo

Mas é claro, isso depende do que você precisa fazer 🙂

Onde utilizamos keydown acima, você também pode utilizar o keyup

Que é ativado após o usuário tirar a pressão da tecla no teclado

Conclusão

No artigo de hoje você aprendeu a como simular evento de keypress com código com JavaScript

Utilizamos o método dispatchEvent e depois criamos uma nova instância de KeyboardEvent, onde descrevemos o evento que precisamos

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 tecnologiasO link acima contém um cupom de desconto para os cursos!