JavaScript キーコードエクスプローラー

ブラウザで任意のキーを押すと event.key、event.code、keyCode、charCode、location、repeat、修飾キー状態を即時表示。コピー可能な JS スニペット付き。ブラウザ内で処理、設定不要。

ブラウザ内で処理
データはブラウザ外に出ません
無料 · 登録不要

キーキャプチャパッドパッドをクリックしてキーを押します。初回読み込み時にも自動でフォーカスします。ここでは Tab、Space、Backspace、矢印、F1–F12 の既定動作を止めます。一部のブラウザ・システムショートカットはページに届きません。

ここをクリックしてキーを押してください

⌨

0 キー入力

イベントプロパティ

直近の keydown の key、物理位置の code、旧 keyCode/which/charCode、location、repeat、isComposing をそのまま表示します。旧数値プロパティは非推奨です。

event.key —

event.code —

keyCode （非推奨） —

which （非推奨） —

charCode （非推奨） —

location —

repeat —

isComposing —

修飾キー

Shift、Ctrl、Alt、Meta は直近の keydown の修飾キー状態を示します。次のキーを捕捉すると更新します。

Shift Ctrl Alt Meta

コピー可能な JS スニペット

スニペットは event.key と捕捉した修飾キーに一致する条件です。キーを捕捉するたびに更新し、event.code は使いません。

event.key vs event.code vs keyCode

フロントエンドのキーボードバグの多くはこの3つの混在が原因。リファレンス対応表：

プロパティ	レイアウト依存	推奨	QWERTY で A を押した時の値
event.key	あり（現在のレイアウト反映）	推奨——セマンティック判定	”a” または Shift で “A”
event.code	なし（物理位置）	推奨——ゲーム・ショートカット	”KeyA”
keyCode	なし	非推奨	65
which	なし	非推奨	65
charCode	なし	非推奨——keydown 時は常に 0	0

よくある用途

キーボードハンドラのデバッグ——実際の event.key を if 条件に貼ってタイポを直す。
ゲームコントロール構築——event.code を使えば AZERTY でも WASD が機能する。
コマンドパレット実装——event.key と e.ctrlKey / e.metaKey を組み合わせる。
レガシーコード監査——keyCode / which を読み、旧ハンドラを event.key に移行する。
IME 入力中の判定——e.isComposing = true は IME 変換中。単一キーハンドラは早期 return すべき。

preventDefault の挙動

キャプチャパッドは Tab、Space、Backspace、矢印キー、F1-F12 のみ preventDefault() を呼び出す—— ブラウザがナビゲーション・ページ操作で消費するキー。Ctrl+W / Cmd+Q などのシステムショートカットは傍受せずブラウザのデフォルト動作を維持する。

キーボード配列と IME

event.code は物理キーを US キーボード上の位置で名付けます。UI Events KeyboardEvent code Values 仕様では、“KeyQ” は US キーボードで q、フランス語 AZERTY キーボードで a と刻印されたキーです。AZERTY で a を打つと key: “a”、code: “KeyQ” になります。キーの位置に意味があるショートカット（WASD 移動）は code、入力される文字に意味があるショートカット（Ctrl+Z で元に戻す）は key で判定してください。

JIS 配列（106/109 キーボード）には US 配列にないキーがあり、“IntlYen”（¥）、“IntlRo”（ろ）、“NonConvert”（無変換）、“Convert”（変換）、“KanaMode”（カタカナ/ひらがな/ローマ字）です。パッド上で押すと、ブラウザーが返す値を確認できます。

IME で変換中は、UI Events の規定により keydown の keyCode が 229 になり、isComposing が true になります。Enter を処理する前に isComposing を確認しないと、変換を確定する Enter でフォームも送信されてしまいます。

制限

スマートフォンやタブレットのソフトキーボードは、完全な keydown ではなく入力した文字を持つ input イベントを送るのが普通です。パッドの下の代替入力欄はその文字を key として表示し、code・keyCode・which・charCode は空欄にします。input イベントはどのキーを押したかを伝えないためです。
Ctrl+W や Cmd+Q などはブラウザーと OS が処理するため、ページには届きません。

FAQ

event.key、event.code、keyCode の違いは？

event.key はキーボードレイアウト適用後の文字または名前付きキー値（Dvorak レイアウトで物理 A 位置を押すと 'a' になる）。event.code は US QWERTY ベースの物理キー位置（KeyA、Digit1、ArrowUp）でレイアウトに依存しない。keyCode はレガシーな数値コード（A は 65）で仕様上は非推奨だが、互換性のため主要ブラウザは現在も発火する。

なぜ keyCode・which・charCode は非推奨なのか？

3つともブラウザ間で値が一貫せず、非ラテン系レイアウトでは曖昧。モダンコードは event.key（セマンティック）または event.code（物理位置）を使うべき。MDN は keyCode と charCode を「deprecated, not recommended for production」と明記しているが、主要ブラウザは互換性のため出力を継続している。本ツールは生の値を表示するのでレガシーコードの監査に使える。

Shift / Ctrl / Alt / Meta 修飾キーをどう判定する？

KeyboardEvent の e.shiftKey、e.ctrlKey、e.altKey、e.metaKey を直接読めばよい。それぞれ boolean。注意：e.metaKey は Windows では Win キー、Mac では Command キー。本ページで生成されるスニペットは現在の修飾キー状態を反映して判定式を自動組み立てする。

モバイルで動作する？

モバイル端末の物理キーボードイベントはプラットフォーム間で一貫しない——多くのソフトキーボードは文字単位の keydown を発火せず、結果文字列だけが input イベントとして届く。本ツールはデスクトップブラウザを前提に設計しており、デスクトップ環境で物理キー信号が最も完全に取得できる。モバイルでは部分情報のみ取得できる降格用シングル文字入力欄を提供するが、フル機能のイベントプロパティ検査にはデスクトップブラウザを使用すること。設計上、モバイル keydown のエミュレーションは行わない。

キー入力データはサーバーに送信される？

送信されない。すべてブラウザネイティブの KeyboardEvent API でローカル処理されるため、押したキーは端末から出ない。DevTools → Network で確認可能。