Neste artigo você vai aprender a como detectar as setas do teclado em JavaScript, quando o usuário pressiona o qualquer seta
Fala programador(a), beleza? Bora aprender mais sobre DOM e JavaScript!
Para realizar o resgate de qual seta foi pressionada vamos precisar criar um evento de DOM
O evento será o keydown, ou seja, todas as teclas estarão sendo mapeadas
Mas precisamos buscar pelas arrows, que são as setas
Veja um exemplo prático do que foi explicado acima:
document.addEventListener('keydown', function(event) {
const key = event.key;
switch (event.key) {
case "ArrowLeft":
console.log("Left arrow!")
break;
case "ArrowRight":
console.log("Right arrow!")
break;
case "ArrowUp":
console.log("Up arrow!")
break;
case "ArrowDown":
console.log("Down arrow!")
break;
}
});
Mapeamos primeiramente a key do botão pressionado, isso nos permite criar a estrutura de switch
Esta estrutura vai checar se o nome da tecla bate com o que estamos procurando
As descritas no switch representam todas as arrows
Desta maneira você consegue verificar quando uma delas é pressionada pelo usuário do seu site! 🙂
Conclusão
Neste artigo você aprendeu a como detectar as setas do teclado em JavaScript
Basicamente mapeamos os eventos de todas as teclas pressionadas
E realizamos um switch verificando se esta tecla foi uma das setas disponíveis no teclado
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!