Detectar as setas do teclado em JavaScript

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!