キーボードコードビジュアライザー オンライン。KeyCode Inspector

キーボードの任意のキーの event.key、event.code、event.which、およびロケーションをリアルタイムで確認できる無料のオンラインツール。すぐに使えるJavaScriptコードスニペットを生成します。

キーを押してください

キーボードの任意のキーを押してコードを確認

ユーティリティスタジオ

このユーティリティをあなたのサイトに追加しませんか?

WordPress、Notion、またはご自身のサイト向けに、カラーとダークモードをカスタマイズできます。

よくある質問

event.key と event.code の違いは何ですか?

event.code は、設定された言語に関係なく、キーボード上の物理的なキーを表します。event.key は生成された文字を表し、Shift を押したり別の言語を使用したりすると変化します。ゲームコントロールには code を使用し、テキスト入力やセマンティックなショートカットには key を使用してください。

event.which とは何ですか?なぜ非推奨なのですか?

event.which はキーの数値ASCIIコードを返すレガシーなプロパティです。event.key と event.code がより正確で読みやすい情報に置き換えるため、モダンな標準では非推奨(deprecated)とされています。このツールでは教育目的で表示しています。

location プロパティはどういう意味ですか?

location プロパティは、キーボード上のキーの物理的な位置を示します:Standard(通常の位置)、Left(左側の修飾キー)、Right(右側の修飾キー)、Numpad(テンキー)。たとえば、左と右のCtrlキーを区別するのに便利です。

国際的なキーボードやQWERT Y以外のレイアウトでも動作しますか?

はい。このツールはブラウザがあなたのキーボード設定に対してレポートする内容をそのまま表示します。event.code は常に物理的な位置のQWERTY名を返し、event.key はあなたの言語に応じた実際の文字を表示します。

# JavaScriptのキーボードイベントを理解する

ユーザーがキーを押すと、ブラウザは3つのイベントを発火します:keydownkeypresskeyup。それぞれが押されたキーに関する情報を持つプロパティを公開しますが、すべてが同等または推奨されているわけではありません。

# キーイベントのプロパティ

event.code — 物理的なキー

QWERTYの命名規則を使用して、キーボード上のキーの物理的な位置の識別子を返します。たとえば、AZERTYキーボードの「A」キーはKeyQを返します。位置が重要であり文字ではないゲームコントロールに最適です。

event.key — 生成された文字

言語とアクティブな修飾キーに応じて生成された文字値を返します。Shift+Aを押すと"A"が返され、Shiftなしでは"a"が返されます。特殊キーの場合は"Enter""Escape""ArrowUp"などの名前が返されます。

# 各プロパティをいつ使うか

ゲームコントロール(言語に関係なくWASD)にはevent.codeを使用し、特定の文字やCtrl+Cのようなセマンティックなキーボードショートカットを検出するにはevent.keyを使用してください。
event.whichevent.keyCodeプロパティはW3C標準に従い、公式に非推奨となっています。モダンブラウザは互換性のためにこれらを引き続きサポートしていますが、新しいコードでは使用しないでください。

参考文献