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?

Mario e seu bigode

O personagem Mario só possui bigode porque quando ele foi criado, em 1981, a resolução de tela dos equipamentos disponíveis não permitia que fosse desenhada uma boca, então os desenvolvedores fizeram o grande bigode para contornar essa limitação tecnológica.

Final Fantasy

O famoso título Final Fantasy, da Square Enix, tem este nome exatamente porque se tratava da última esperança da empresa, que estava à beira da falência quando o lançou. Clique aqui e conheça detalhes dessa história.

Space Invaders

A partida mais longa do clássico Space Invaders durou incríveis 38 horas e 32 minutos e esta façanha foi conseguida por um jogador de apenas 12 anos! O jogo, claro, podia ser pausado para alimentação e descanso, mas ainda assim o recorde, estabelecido no dia 02/09/1980, ainda não foi quebrado. Saiba mais.

Máquina de Pascal

A Máquina de Pascal, criada em 1642 pelo filósofo, físico e matemático francês Blaise Pascal, é reconhecida como o primeiro computador do mundo e ele foi criado com o objetivo de calcular impostos. Saiba mais.

PC com barulho?

Excesso de barulho dentro do seu gabinete, principalmente logo que você o liga, pode ser sintoma de problemas nas ventoinhas, que podem precisar ser limpas ou trocadas. Entre em contato com um técnico de sua confiança e verifique isso o quanto antes.