Eventos de Teclado em JavaScript

Um tipo comum de eventos em programação são os eventos de teclado.

keydown: dispara ao pressionar uma tecla do teclado e dura enquanto a tecla estiver pressionada.
keyup: dispara ao soltar uma tecla do teclado.
keypress: dispara ao pressionar uma tecla do teclado, mas após o evento keydown e antes do evento keyup. É importante notar que esse evento é disparado apenas para as teclas que produzem um caractere como saída, como ao digitar letras. Pressionamentos de outras teclas, como a tecla Alt, não são considerados.

Para trabalhar com eventos de teclado, existe o objeto KeyboardEvent, que adiciona ao objeto Event uma série de propriedades específicas para o teclado:

altKey: retorna true se a tecla Alt foi pressionada durante o evento.
key: retorna o caractere da tecla pressionada; por exemplo, ao pressionar a tecla "T", essa propriedade conterá "T". Se a tecla "R" for pressionada, ela conterá "R".
code: retorna a representação textual da tecla física pressionada no teclado QWERTY; por exemplo, ao pressionar a tecla "T", essa propriedade conterá "KeyT", e ao pressionar a tecla ";" (ponto e vírgula), a propriedade retornará "Semicolon".
Ao usar esta propriedade, deve-se considerar que se uma tecla for pressionada em um teclado virtual, o valor retornado será determinado pelo navegador, dependendo de qual tecla física a pressão corresponderia.
ctrlKey: retorna true se a tecla Ctrl foi pressionada durante o evento.
metaKey: retorna true se uma tecla meta foi pressionada durante o evento.
shiftKey: retorna true se a tecla Shift foi pressionada durante o evento.

Por exemplo, podemos usar as teclas do teclado para mover um elemento em uma página web:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
    <style>
      #blueRect {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="blueRect"></div>

    <script>
      const blueRect = document.getElementById("blueRect");
      const blueRectStyle = window.getComputedStyle(blueRect);

      window.addEventListener("keydown", moveRect);

      function moveRect(e) {
        const left = parseInt(blueRectStyle.marginLeft);
        const top = parseInt(blueRectStyle.marginTop);

        switch (e.key) {
          case "ArrowLeft":
            if (left > 0) blueRect.style.marginLeft = left - 10 + "px";
            break;
          case "ArrowUp":
            if (top > 0) blueRect.style.marginTop = top - 10 + "px";
            break;
          case "ArrowRight":
            if (left < document.documentElement.clientWidth - 100) blueRect.style.marginLeft = left + 10 + "px";
            break;
          case "ArrowDown":
            if (top < document.documentElement.clientHeight - 100) blueRect.style.marginTop = top + 10 + "px";
            break;
        }
      }
    </script>
  </body>
</html>

Neste exemplo, o evento keydown é tratado para controlar as propriedades de estilo do elemento blueRect. Como o estilo do elemento pode não estar definido quando o manipulador é anexado, ele é explicitamente calculado com o método window.getComputedStyle():

const blueRectStyle = window.getComputedStyle(blueRect);

No manipulador de eventos, os valores das propriedades marginLeft e marginTop são selecionados a partir desse estilo.

const left = parseInt(blueRectStyle.marginLeft); // deslocamento da margem esquerda
const top = parseInt(blueRectStyle.marginTop); // deslocamento da margem superior

A seguir, utilizando a propriedade e.key, identificamos a tecla pressionada. A lista de códigos de teclas pode ser consultada na página MDN Web Docs.

Estamos interessados nas quatro teclas de direção: para cima, para baixo, para esquerda e para direita, correspondentes aos valores "ArrowUp", "ArrowDown", "ArrowLeft" e "ArrowRight". Se uma dessas teclas for pressionada, realizamos ações para aumentar ou diminuir o deslocamento do elemento em relação às bordas superior e esquerda. Para garantir que o elemento não ultrapasse os limites da janela, verificamos os valores limites com document.documentElement.clientWidth (a largura do elemento raiz) e document.documentElement.clientHeight (a altura do elemento raiz).

Cabe notar que este código não é muito eficiente, pois cada chamada ao manipulador de eventos requer cálculos dos posicionamentos horizontal e vertical de blueRect. Além disso, é necessário calcular a cada evento os limites à direita (document.documentElement.clientWidth - 100) e abaixo (document.documentElement.clientHeight - 100) da área visível do documento. Para otimizar isso, poderíamos adicionar abstrações adicionais, como as posições atuais de blueRect e os limites da área visível. Assim, modificamos o código JavaScript da seguinte maneira:

const blueRect = document.getElementById("blueRect");
const position = [20, 20]; // posição inicial de blueRect

function setPosition() {
  blueRect.style.marginLeft = position[0] + "px";
  blueRect.style.marginTop = position[1] + "px";
}

function init() {
  const rightLimit = document.documentElement.clientWidth - 100; // limite direito
  const bottomLimit = document.documentElement.clientHeight - 100; // limite inferior

  setPosition(); // define a posição inicial para blueRect

  function moveRect(e) {
    switch (e.key) {
      case "ArrowLeft":
        if (position[0] > 0) position[0] -= 10;
        break;
      case "ArrowUp":
        if (position[1] > 0) position[1] -= 10;
        break;
      case "ArrowRight":
        if (position[0] < rightLimit) position[0] += 10;
        break;
      case "ArrowDown":
        if (position[1] < bottomLimit) position[1] += 10;
        break;
    }
    setPosition();
  }
  window.addEventListener("keydown", moveRect);
}
// executa a função init quando a página é carregada
window.addEventListener("load", init);

Agora, as coordenadas de blueRect são armazenadas no array position, onde o primeiro valor é o deslocamento à esquerda e o segundo valor é o deslocamento superior. A função setPosition é definida para atualizar a posição real de blueRect na página com base nessas coordenadas.

A função init é chamada quando a janela é carregada e define os limites de movimentação de blueRect, além de estabelecer sua posição inicial. O manipulador moveRect então ajusta os valores no array position com base na tecla pressionada, e as alterações são aplicadas chamando setPosition.

Por fim, o manipulador de eventos keydown é anexado ao ouvinte de eventos para gerenciar o movimento do blueRect com base nas teclas pressionadas.