# Qual é a tecla? (event.key e event.code)

> Aperte qualquer tecla e esta ferramenta mostra o que o JavaScript recebe: event.key (o caractere ou o nome da tecla), event.code (a posição física no teclado), o antigo keyCode, o lado do teclado e os modificadores, como Ctrl e Shift. Serve para programar atalhos de teclado, jogos e para descobrir o nome de uma tecla.

- Endereço oficial: https://pradev.com.br/qual-e-a-tecla
- Categoria: Front-end e design
- Tipo: Utilitário
- Atualizado em: 2026-10-01
- Autor: Leonardo Gaertner (https://pradev.com.br/sobre)
- Preço: grátis, sem cadastro. O processamento acontece no navegador de quem usa.

## Como usar

1. Clique na área de captura (ou só aperte uma tecla com a página em foco).
2. Aperte a tecla ou a combinação que quer conferir.
3. Copie o valor de event.key ou de event.code para usar no seu código.

## Como funciona

O event.key diz o que a tecla produz, considerando o layout do teclado e o Shift: no teclado ABNT2, a tecla ç dá key "ç", e com Shift dá "Ç". O event.code diz qual tecla física foi apertada, sem levar o layout em conta: a mesma tecla ç tem code "Semicolon", porque fica onde o ponto e vírgula está no teclado americano.

Use key para atalhos que dependem da letra, como Ctrl+S, e code para jogos e controles que dependem da posição, como WASD. O keyCode é numérico e obsoleto: varia entre navegadores e layouts e não deve ser usado em código novo, mas a ferramenta o mostra para quem mantém código antigo.

### Exemplo: a tecla ç no teclado ABNT2

```text
event.key: "ç"
event.code: "Semicolon"
event.keyCode: 186 (varia entre navegadores)
```

## Perguntas frequentes

### Como detectar Ctrl+S em JavaScript?

Escute keydown e confira e.key.toLowerCase() === 's' e (e.ctrlKey || e.metaKey), para funcionar também com o ⌘ do Mac. Chame e.preventDefault() para o navegador não abrir a janela de salvar.

### Por que a tecla ç aparece como Semicolon?

Porque o event.code segue a posição das teclas no teclado americano, onde fica o ponto e vírgula. É de propósito: assim um jogo que usa a posição das teclas funciona em qualquer layout.

### Por que no celular aparece Unidentified?

Porque muitos teclados virtuais não informam a tecla no keydown, principalmente com corretor e sugestões ligados. Para campos de texto no celular, prefira o evento input, que informa o texto digitado.

## Fontes

- [W3C: valores de KeyboardEvent.code](https://www.w3.org/TR/uievents-code/)

## Ferramentas relacionadas

- [Informações de Caractere](https://pradev.com.br/informacoes-de-caractere): Veja o código Unicode (U+), os bytes UTF-8, o escape para JavaScript, HTML e CSS de cada caractere, e encontre caracteres invisíveis.
- [Conversor de Cores HEX RGB HSL](https://pradev.com.br/conversor-de-cores): Converta cores entre HEX, RGB, HSL, OKLCH, HWB, HSV e CMYK, com seletor de cores e os nomes do CSS. Grátis, direto no navegador.
- [Testador de Regex](https://pradev.com.br/regex-tester): Teste expressões regulares online: destaque dos casamentos, grupos e flags. Usa o motor do JavaScript. Grátis, direto no navegador.
- [Codificar e Decodificar URL](https://pradev.com.br/url-encode-decode): Codifique e decodifique URL (percent-encoding) online: trechos de parâmetros ou URL completa, com acentos. Grátis, direto no navegador.
- [Conversor px para rem](https://pradev.com.br/conversor-px-rem): Converta px em rem, em, pt e % e o contrário, com a base de 16px ou outra. Tabela com os tamanhos mais usados. Grátis, no navegador.
- [Gerador de Lorem Ipsum](https://pradev.com.br/gerador-de-lorem-ipsum): Gere texto Lorem Ipsum por parágrafos, frases ou palavras, com ou sem tags <p>, para preencher layouts e protótipos. Grátis e sem cadastro.