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 eventokeydown
e antes do eventokeyup
. É 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
: retornatrue
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
: retornatrue
se a tecla Ctrl foi pressionada durante o evento.metaKey
: retornatrue
se uma tecla meta foi pressionada durante o evento.shiftKey
: retornatrue
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.