Eventos de Teclado - JavaScript

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

keydown: ocorre ao pressionar uma tecla do teclado e dura enquanto a tecla estiver pressionada.
keyup: ocorre ao soltar uma tecla do teclado.
keypress: ocorre ao pressionar uma tecla do teclado, mas após o evento keydown e antes do evento keyup. É importante notar que esse evento é gerado 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 a geração do 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 a geração do evento.
metaKey: retorna true se uma tecla meta foi pressionada durante a geração do evento.
shiftKey: retorna true se a tecla Shift foi pressionada durante a geração do 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 é acionada 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.