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?

Música tema do Blanka

Até a primeira metade dos anos 90 era bastante comum que as trilhas sonoras dos games fossem criadas por mulheres e a responsável pelas músicas do clássico Street Fighter 2 foi Yoko Shimomura. Segundo ela, o ritmo "Tararirarin" da música tema do personagem Blanka, do Brasil, veio à sua cabeça enquanto ela estava no trem a caminho da Capcom.

ENIAC

O ENIAC, primeiro computador valvulado do mundo, possuía 17.000 válvulas, 500.000 pontos de solda, 30 toneladas de peso e ocupava uma área de 180 metros quadrados. Clique aqui e conheça mais sobre a história dos computadores.

Street Fighter 2

Street Fighter 2, lançado para o Super Nintendo no início dos anos 90, foi o principal responsável pelo aumento nas vendas deste console. Graças ao sucesso do título nos Arcades e à perfeita adaptação ao console, muitos consumidores adquiriram o SNES para jogarem o título em casa. Saiba mais.

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.

Asteroids

O título Asteroids, do Atari, possui recorde de pontuação há 30 anos. Em 1982 um americano chamado Scott Safran atingiu a marca de 41.336.440. Atualmente ele faz parte de um minúsculo grupo de jogadores que conseguiram manter seus recordes por mais de 30 anos.