Detectando teclas pressionadas no teclado com keydown e keyup em JavaScript

Como detectar teclas pressionadas no teclado ("keydown", "keyup")?

Detectar teclas pressionadas no teclado é uma funcionalidade comum em muitas aplicações web. Em JavaScript, você pode usar os eventos "keydown" e "keyup" para capturar quando uma tecla é pressionada e liberada. Esses eventos fornecem uma maneira poderosa de interagir com o usuário, como em formulários, jogos e atalhos de teclado.

O que são os eventos "keydown" e "keyup"?

Os eventos "keydown" e "keyup" são usados para detectar quando uma tecla do teclado é pressionada e quando ela é liberada, respectivamente.

• "keydown" é acionado quando a tecla é pressionada.
• "keyup" é acionado quando a tecla é solta.

Esses dois eventos permitem que você execute ações com base nas teclas pressionadas, como validar formulários ou navegar pela interface sem a necessidade de um clique do mouse.

Exemplo básico com "keydown":

document.addEventListener('keydown', function(event) {
  console.log('Tecla pressionada: ', event.key);
});

No exemplo acima, o evento "keydown" é escutado no documento inteiro, e sempre que uma tecla é pressionada, a tecla pressionada é exibida no console. A propriedade event.key retorna o valor da tecla pressionada.

Exemplo básico com "keyup":

document.addEventListener('keyup', function(event) {
  console.log('Tecla liberada: ', event.key);
});

Neste exemplo, o evento "keyup" é usado para detectar quando a tecla é liberada e também exibe o nome da tecla no console.

Diferenças entre os eventos "keydown" e "keyup"

Quando usar "keydown" ou "keyup"?

• Use "keydown" quando você precisar detectar a pressão da tecla de forma contínua, como em jogos ou em campos de formulário onde o usuário digita texto e você quer agir imediatamente.
• Use "keyup" quando precisar detectar a liberação da tecla, como em atalhos de teclado ou validação final após o usuário ter terminado de digitar.

Acessando informações do evento

Quando o evento "keydown" ou "keyup" é disparado, o objeto do evento (event) contém várias propriedades úteis, como:

• event.key: O valor da tecla pressionada (como "Enter", "A", "ArrowUp").
• event.code: O código físico da tecla pressionada (como "KeyA", "Enter").
• event.altKey, event.ctrlKey, event.shiftKey: Retorna true se as teclas de modificador (Alt, Ctrl, Shift) estiverem pressionadas durante o evento.

Exemplo de código acessando propriedades do evento:

document.addEventListener('keydown', function(event) {
  console.log('Tecla pressionada: ', event.key);
  console.log('Código da tecla: ', event.code);
  console.log('Alt pressionado? ', event.altKey);
});

Neste exemplo, o código captura não apenas o nome da tecla, mas também o código da tecla e se a tecla "Alt" foi pressionada junto com a tecla.

Prevenindo o comportamento padrão

Em alguns casos, pode ser necessário evitar o comportamento padrão de uma tecla, como evitar o envio de um formulário ao pressionar "Enter". Isso pode ser feito usando event.preventDefault().

Exemplo de código prevenindo o comportamento padrão:

document.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    event.preventDefault();  // Impede o envio do formulário
    console.log('Enter pressionado, mas não enviado!');
  }
});

Neste exemplo, event.preventDefault() é usado para evitar que a tecla "Enter" envie um formulário, permitindo controlar o comportamento da página de acordo com a necessidade.

Considerações de performance

Embora os eventos "keydown" e "keyup" sejam bastante úteis, é importante ter cuidado ao usá-los, especialmente se você estiver adicionando muitos manipuladores de eventos em elementos diferentes. Isso pode afetar a performance da sua página, principalmente em páginas com muitos elementos ou ações rápidas do usuário.

Uma boa prática é limitar o número de eventos e usar delegação de eventos, sempre que possível, para garantir uma melhor performance e evitar que seu código se torne difícil de manter.

Conclusão

Detectar teclas pressionadas com os eventos "keydown" e "keyup" permite que você crie interações mais dinâmicas e responsivas em sua aplicação. Saber quando usar cada um desses eventos e como acessar as informações do evento ajuda a tornar seu código mais eficiente e fácil de manter. Seja para validar entradas de formulários ou para criar atalhos de teclado personalizados, esses eventos são ferramentas essenciais no desenvolvimento de páginas interativas.

Usando eventos de teclado para interações dinâmicas em JavaScript

A detecção de teclas pressionadas é uma das interações mais comuns em aplicações web, especialmente em formulários e jogos. Utilizando os eventos "keydown" e "keyup", você pode criar interfaces dinâmicas onde a entrada do usuário é tratada de forma imediata. Além disso, é possível prevenir o comportamento padrão de certas teclas, como "Enter", garantindo um controle total sobre a interação do usuário.

Algumas aplicações:

• Usar "keydown" para criar jogos interativos onde o movimento do jogador depende das teclas pressionadas.
• Implementar atalhos de teclado personalizados para ações específicas, como salvar ou copiar.
• Validar entradas em campos de formulário à medida que o usuário digita, evitando envio imediato de dados.
• Usar "keyup" para permitir que a ação seja disparada apenas após o usuário terminar de digitar, como no caso de pesquisas instantâneas.

Dicas para quem está começando

• Pratique com os eventos "keydown" e "keyup" para entender como as teclas podem interagir com sua aplicação.
• Comece com eventos simples, como detectar "Enter", e depois explore outras teclas e modificadores como "Shift" e "Alt".
• Use event.preventDefault() para controlar o comportamento de teclas específicas, como impedir que o formulário seja enviado com a tecla "Enter".
• Experimente criar atalhos de teclado para ações comuns na sua aplicação, como navegar entre seções.

Compartilhe este tutorial