Além do mouse, o teclado é uma das formas mais importantes de interação com a página.

Eventos de teclado permitem criar atalhos, validar entradas em tempo real e melhorar a experiência do usuário.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

  • Entender os principais eventos de teclado
  • Capturar teclas pressionadas
  • Criar atalhos de teclado
  • Saber quando usar cada evento
  • Evitar eventos obsoletos

Principais eventos de teclado

Os eventos de teclado mais usados são:

  • keydown
  • keyup
  • keypress (obsoleto)

keydown

O keydown é disparado quando a tecla é pressionada. 

 
  document.addEventListener("keydown", (event) => 
  { 
    console.log(event.key); 
  }); 
 console.log(event.key); // Saída será o nome da tecla pressionada

Esse evento dispara continuamente se a tecla for mantida pressionada.

keyup

O keyup é disparado quando a tecla é solta. 

 document.addEventListener("keyup", (event) => { console.log("Tecla solta:", event.key); }); 
 console.log("Tecla solta:", event.key); // Saída será exibida ao soltar a tecla

Muito usado para:

  • Detectar fim de ação
  • Confirmar comandos

E o keypress?

O evento keypress está obsoleto e não deve mais ser usado.

Ele não funciona corretamente com teclas especiais e layouts modernos.

Prefira sempre keydown e keyup.

Capturando teclas específicas

Podemos reagir a teclas específicas: 


    document.addEventListener("keydown", (event) => 
    { 
      if (event.key === "Enter") 
        { 
          console.log("Enter pressionado"); 
        }
    }); 
 console.log("Enter pressionado"); // Saída ao pressionar Enter

Criando atalhos de teclado

Podemos combinar teclas: 

 document.addEventListener("keydown", (event) => { if (event.ctrlKey && event.key === "s") { event.preventDefault(); console.log("Atalho Ctrl + S"); } }); 
 
      console.log("Atalho Ctrl + S"); // Saída ao pressionar Ctrl + S

Outras propriedades úteis:

  • event.shiftKey
  • event.altKey

Teclado e formulários

Eventos de teclado são muito usados em inputs: 

 const input = document.getElementById("nome");
    input.addEventListener("keydown", (event) => 
    {
      console.log(event.key);
    });

Mas atenção:

Para capturar o valor digitado, veremos que input é melhor que eventos de teclado.

Boas práticas com teclado

  • Prefira keydown para ações imediatas
  • Use keyup para ações finais
  • Evite keypress
  • Use preventDefault para atalhos

Resumo da aula para nunca mais esquecer

  • keydown detecta tecla pressionada
  • keyup detecta tecla solta
  • keypress está obsoleto
  • event.key identifica a tecla
  • Eventos de teclado criam atalhos e interações

Na próxima aula, vamos estudar os eventos de formulário e texto.

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Galaxy Game

As primeiras máquinas de fliperama do mundo a utilizarem moedas, chamadas de Galaxy Game, custavam mais de 20 mil dólares para serem produzidas. Saiba mais sobre elas aqui.

Tomb Raider - O Filme

Considerando todas as adaptações de jogos de videogame para o cinema, a mais bem sucedida foi Lara Croft: Tomb Raider, lançado em 2001 e que faturou 274 milhões de dólares. Ele foi dirigido por Simon West e estrelado pela bela Angelina Jolie.

Duck Hunt

Ao completar o nível 99 do jogo Duck Hunt, para Nintendo, o jogo retorna ao primeiro nível, mas um bug impede que se acerte os patos neste recomeço. Este é um exemplo do que é chamado no mundo dos games de "Kill Screen".

Playstation

O Playstation só nasceu porque uma parceria entre Sony e Nintendo, para desenvolver uma unidade de CD para o Super Nintendo, fracassou. Clique aqui e saiba mais.

Inteligência artificial

O primeiro jogo a fazer uso de uma Inteligência Artificial foi o Mouse in the Maze, criado em 1955, na União Soviética. Você pode saber mais sobre ele clicando aqui.