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