Keycode Lookup

使い方

1. まずページの任意の場所をクリックしてフォーカスし、任意のキーを押します。
2. 大きいタイルに event.key、カードに event.code と旧 event.keyCode が表示されます。
3. Ctrl・Alt・Shift・Meta を押している間、対応するバッジが点灯します。
4. テスト入力欄への入力でもリスナーが発火します。入力欄から見たキーの挙動の確認に便利です。
5. 履歴リストに直近 8 回のキーが残り、比較できます。

よくある用途

• ショートカット実装 —— どの event.code を使えばどのレイアウトでも成立するか確認。
• レイアウトのデバッグ —— QWERTY 以外のレイアウトが実際に報告するキーを見る。
• ゲーム入力 —— ハンドラを結線する前にキーコードと連続入力の挙動を確認。
• イベントの説明 —— key（文字）と code（物理キー）の違いを実演。

よくある質問

Q: key と code が違うのはなぜ？ A: event.key は生成される文字（レイアウト依存）、event.code は物理的なキー位置（レイアウト非依存）です。ショートカットは code を優先すると、AZERTY でも KeyZ が Ctrl+Z のままになります。

Q: keyCode は非推奨ですか？ A: はい。keydown と keyup では key か code を使うべきです。旧コードやチートシートがまだ参照しているため数値も表示しています。照合すれば検索の手間が省けます。

Q: 矢印キーでページがスクロールするのは？ A: このツールは監視のみで既定の動作は止めません。矢印や Tab は通常どおり機能します。自分のショートカット コードでは、処理したキーに対して preventDefault() を呼んでください。