Keyboard Key Code Viewer

キーを押してJavaScriptのKeyCodeを取得

任意のキーのJavaScriptキーコードを調べる

概要

ウェブでキーボード操作を作るとき、キー押下がどんな値を生むか — `key`・`code`・旧来の`keyCode` — を正確に知る必要があります。キーコードビューアはこれをライブで表示します。任意のキーを押すと、JavaScriptが見る識別子を示します。このツールはブラウザ内でキーイベントを捉え、当てずっぽうなしにショートカットやハンドラを組めます。

使い方(ステップ)

  1. 1

    ツールにフォーカスしてキーを押す

    ビューアをクリックし、検査したい任意のキーや組み合わせを押します。

  2. 2

    識別子を読む

    `key`・`code`・`keyCode`、そしてどの修飾キーが押されていたかを見ます。

  3. 3

    適切なプロパティを使う

    ハンドラに合う値をコピーします。文字は通常`key`、物理キー位置は`code`。

仕組み

ツールはキーボードイベントを監視し、キーを押すとイベントのプロパティを読みます。`key`('a'や'Enter'などの文字・名前)、`code`('KeyA'などの物理キー)、数値の`keyCode`(非推奨だがまだ見られる)、修飾状態(Shift・Ctrl・Alt・Meta)。これらを即座に表示します。すべてブラウザ内でローカルに動き、押したキーは記録も送信もされません。

こんなときに使う

キーボードショートカットを作り、一致に必要な正確な`key`や`code`が要るとき。特定のキーでハンドラが発火しない理由をデバッグするとき。レイアウト間で同じ文字を共有するキーを区別するとき。ショートカット用の修飾キーの組み合わせを検出するとき。`key`・`code`・`keyCode`の違いを学ぶとき。特殊・メディアキーが何を報告するか確認するとき。

よくある質問

`key`は生成された値で、レイアウトと修飾キーの影響を受けます(Shift+aは'A')。`code`は物理キー位置でレイアウトに影響されません(そのキーは常に'KeyA')。文字には`key`、WASDのような物理位置ショートカットには`code`を使います。

注意事項

一部のキーはブラウザ・OS・キーボードレイアウトで挙動が異なります。特にデッドキー、IME入力、メディアキー。1台の値がどこでも通用すると仮定せず、対象プラットフォームでテストしてください。

キーコードビューアー | Super Easy Utils