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?

Ultima Online

Criar um jogo é muito mais complexo do que parece. São milhares, às vezes, milhões de linhas de código. Isso não é exagero! Apenas o jogo Ultima Online possui 6.006.313 linhas de programação, totalizando 25.103.295 palavras

Tetris

O título Tetris detém o recorde de jogo mais adaptado de todos os tempos. No total foram mais de 60 plataformas diferentes que receberam alguma versão do quebra-cabeças criado por Alexey Pajitnov. Conheça mais sobre este incrível jogo clicando aqui.

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.

Civilization

A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.

Senhas

Digitar senhas em computadores de uso coletivo é extremamente perigoso, pois além de softwares de monitoramento, existem dispositivos de hardware que podem capturar suas senhas. Evite ao máximo acessar sites de bancos a partir destes computadores. Veja mais aqui.