JavaScriptキーコード検索

仕組み

1. キーを押す: 入力ゾーンをクリックして、任意のキー, 文字、数字、ファンクションキー、矢印、修飾キー、特殊キー, を押します。
2. キーコードを読む: ツールはキーのevent.key、event.code、event.keyCode(レガシー)、charCode値を瞬時に表示します。
3. コードで使用: キーボードイベントリスナーまたはホットキー実装に必要な正確な値をコピーします。

なぜKeyCode検出ツールを使うのか?

JavaScriptキーボードイベントは複数の異なるプロパティを公開します, key、code、keyCode、charCode、which, どれを使うか、どの値と比較するかは常に難しいです。KeyCode検出ツールは、キーを押して、すべてのイベントプロパティをすぐに表示できるようにすることで、推測を排除します。キーボードショートカットの構築、特殊キーの処理、ホットキーの実装、キーボードイベントリスナーのデバッグに貴重です。

機能

• すべてのイベントプロパティ: 各キー押下のevent.key、event.code、event.keyCode、event.which、event.charCodeを表示します。
• 修飾キーの検出: Shift、Ctrl、Alt、Metaがキーを押す際に押されていたかを示します。
• 特殊キーのサポート: ファンクションキー(F1〜F12)、矢印、Enter、Escape、Tab、Backspace、その他すべての特殊キーで動作します。
• キーの履歴: 複数のキーを比較するために、最近のキー押下のログを保持します。
• 値をコピー: 任意の値をクリックして、クリップボードに直接コピーします。

よくある質問

event.keyとevent.keyCodeの違いは?

event.keyはモダンな標準です, 「ArrowLeft」や「Enter」のような読みやすい文字列を返します。event.keyCodeはレガシーの数値コード(非推奨ですが、まだサポートされています)。新しいコードにはevent.keyを使用し、古いブラウザとの互換性を維持するためにevent.keyCodeを使用します。

Ctrl+Sなどのキーの組み合わせを検出するには?

キーボードの組み合わせは、event.keyを修飾キーチェックと組み合わせて使用します: if (event.ctrlKey && event.key === "s")。このツールでCtrl+Sを押してすべての値を表示し、イベントリスナーで同じ条件を再現します。

なぜ一部のキーが同じkeyCodeを表示するのですか?

keyCode値は標準化されておらず、一部のキーはコンテキストに応じてコードを共有します。event.codeはより信頼性が高く、キーボードレイアウトに関係なくキーの物理的な位置(例: 「KeyA」)を識別します。一方、event.keyはそのキーが生成する文字を反映します。

JavaScript のキーボードイベントの 30 年史

キーボードイベントには、DOM 内で悪名高いほど乱雑な歴史があります。Netscape Navigator 2(1995年)は、仕様のなかった数値の keyCode プロパティを持つ元の onkeydown、onkeypress、onkeyup ハンドラを導入しました。ブラウザはそれぞれ独自の値を発明しました。Internet Explorer 4(1997年)は、event.keyCode を唯一のプロパティとする独自のバリアントを実装し、Netscape は event.which に固執しました。DOM Level 2 Events(W3C、2000年11月)はイベントフロー(キャプチャ/バブル)を標準化しましたが、ベンダーが合意できなかったため、キーボードイベントは明示的に棚上げにしました。結果:開発者は10年以上にわたって e.keyCode || e.which のようなコードを書きました。DOM Level 3 Events(W3C ワーキングドラフト 2003、勧告 2018)は最終的に、モダンな event.key(Unicode 文字または「ArrowLeft」のような名前付きキー)と event.code(レイアウトに依存しない物理的なキー位置、例えば「KeyA」)を導入し、同時に keyCode、charCode、which を非推奨にしました。UI Events 仕様(W3C、進行中)はこの作業の現代的な家です。ブラウザは徐々に追いつきました:Chrome 51(2016年5月)、Firefox 47(2016年6月)、Safari 10.1(2017年3月)はすべて event.code サポートを出荷しました。レガシーの keypress イベントは beforeinput および input イベントに代わって非推奨です。

5 つのプロパティ、解読

• event.key(モダン、これを使用)。生成された文字または名前付きキー。文字と数字は修飾子とレイアウトを尊重した Unicode 文字を返します(Shift+a = 「A」、AZERTY Q-位置 = 「a」)。名前付きキーは「Enter」、「Escape」、「ArrowLeft」、「F5」、「Control」のような文字列です。UI Events で定義されています。
• event.code(モダン、ゲームに使用)。レイアウトや修飾子に依存せず、キーボード上の物理キーを識別します。例:「KeyA」、「Digit1」、「ArrowUp」、「ShiftLeft」、「MetaLeft」。WASD 移動、vim スタイルのナビゲーション、キーボードレイアウトを無視するべきショートカットにはこれを使用します。
• event.keyCode(非推奨)。数値コード。13 = Enter、27 = Escape、32 = スペース、37-40 = 矢印 左/上/右/下、65-90 = A-Z、112-123 = F1-F12。値は標準化されたことがなく、収束によってのみブラウザ間で一貫したものとなりました。新しいコードでは避けてください。
• event.which(非推奨)。Netscape の keyCode に相当します。ほとんどの印刷可能な文字と印刷不可能なキーについては、keyCode と同じです。古いポリフィル e.keyCode || e.which は、片方が 0 の場合を処理しました。
• event.charCode(非推奨、keypress でのみ)。文字の Unicode コードポイント。「a」の場合 97、「A」の場合 65。keypress(これ自体も非推奨)でのみ発火します。input および beforeinput イベントが現代の代替です。
• 修飾子ブール値。event.shiftKey、event.ctrlKey、event.altKey、event.metaKey(macOS では Command、Windows では Windows キー)。常に修飾子を明示的にチェックしてください:クロスプラットフォームの「保存」には e.metaKey || e.ctrlKey(Mac では Cmd+S、Windows/Linux では Ctrl+S)。
• event.location。左 vs 右の修飾子とテンキーを区別します。0=標準、1=左修飾子、2=右修飾子、3=テンキー。ゲーミングレイアウトの左 Shift vs 右 Shift を区別するのに便利です。

キーコード検索が実際に重要な場所

• アプリケーションキーボードショートカット。Cmd/Ctrl+S で保存、Cmd/Ctrl+Z で元に戻す、Cmd/Ctrl+K でコマンドパレットを開く(Slack、Linear、GitHub、Notion はすべて 2020 年頃からこれを使用)。常に印刷可能なキーには event.key、メタキーには修飾子ブール値を使用します。
• コマンドパレットとファジーファインダー。Slack(2014)と Linear(2019)によって普及した Cmd+K パターン。グローバルに開くショートカットをリッスンし、ArrowUp/ArrowDown ナビゲーション、選択する Enter、却下する Escape を処理します。
• ブラウザゲームと HTML5 ゲーム開発。Phaser、Babylon.js、Three.js。移動キーには常に event.code を使用して、AZERTY キーボード(「W」が「Z」位置にある)で WASD が動作するようにします。Sebastian Lague、Notch(初期 Minecraft プロトタイプ)、itch.io ゲームはすべて、この AZERTY の落とし穴に陥りました。
• アクセシビリティパターン。モーダルダイアログは閉じるために Escape が必要です。Combobox ウィジェットには ArrowDown/ArrowUp/Enter/Escape が必要です。ツールチップは Escape で却下する必要があります。WAI-ARIA Authoring Practices Guide は、すべての一般的なウィジェットのキーボード対話パターンを定義しています。event.key はこれらのチェックの標準です。
• テキストエディタとコードエディタの実装。Monaco(ブラウザの VS Code エディタ)、CodeMirror、ProseMirror、Lexical はすべて、キーボードイベントをコマンドにマップします。レイアウトに依存しない vim/emacs スタイルのキーバインディングには event.code を使用します。
• フォーム UX 改善。Enter で送信、Escape でぼかし、Tab でフォーカスを進めます。チェックアウトフロー、検索バー、オートコンプリートフィールドで一般的です。
• ブラウザ拡張ホットキー。Vimium、SurfingKeys、Tridactyl はウェブ全体のキーボードナビゲーションを提供します。ドキュメントレベルでリッスンし、複雑なモーダルキーシーケンス(gg = 一番上に行く、vim のように)を処理します。

キーボードイベント処理の一般的な間違い

• 新しいコードで keyCode を使用する。DOM Level 3(2018)以来非推奨、歴史的にブラウザ間で一貫性がなく、非 US レイアウトで壊れます(カンマキーは US では keyCode が 188、一部のドイツのキーボードでは 191)。代わりに event.key を使用してください。
• ゲーム移動用に e.key === "w" をハードコーディングする。AZERTY(フランス語)キーボードでは、物理的な W キーは「z」を入力します。プレイヤーは記憶している WASD クラスタに手を伸ばしますが、間違った入力が得られます。代わりに event.code === "KeyW" を使用してください。これは物理的位置を識別します。
• 「保存」のために ctrlKey のみをチェックする。macOS では、Cmd+S が慣習です。ctrlKey は false ですが metaKey は true です。常に両方をチェック:(e.metaKey || e.ctrlKey) && e.key === "s"。
• ブラウザ予約のショートカットで preventDefault を忘れる。preventDefault なしで Cmd+S をハイジャックすると、依然として Save Page As がトリガーされます。Cmd+P(印刷)、Ctrl+F(ブラウザ検索)、Ctrl+N(新しいウィンドウ, どちらにせよブロックできません)、Ctrl+Tab(Chrome は許可しません)も同様です。ハンドラで e.preventDefault() を呼び出します。
• IME 構成を無視する。日本語、中国語、韓国語の入力方式(IME)は、ユーザーが文字を構成している間に keydown イベントを発生させます。ショートカットハンドラを発生させる前に e.isComposing をチェックするか、compositionend イベントを使用します。Slack は 2017 年に日本人ユーザーに対してこれを有名に失敗しました。
• 非推奨の keypress イベントを使用する。文字を生成するキー(矢印キー、ファンクションキーなどではない)に対してのみ発火します。非推奨です。ショートカットには keydown、テキスト変更には input/beforeinput を使用してください。
• 各リピートでショートカットをトリガーする。キーを押し続けると keydown イベントが繰り返し発生します。トグルアクション(パレットを開く、タブを切り替える)の場合、e.repeat をチェックして早期に終了し、ユーザーが誤ってキーを保持したときに 30 個の「開く」コマンドを登録するのを避けます。

その他のよくある質問

ユーザーが非 US キーボードを使用しているときに、なぜキーハンドラが発火しないのですか?

ほぼ常に、そのレイアウトで Shift とのみ存在する文字に対して event.key をチェックしているためです。ドイツの QWERTZ キーボードでは、「/」は Shift+7(独自のキーではない)。フランス語の AZERTY では、数字 0-9 は Shift+上の行で入力されます。位置ベースのショートカットには event.code(物理キー)、ユーザーが入力した文字を実際に必要とするコンテンツベースのショートカットには event.key を使用します。

Cmd+K / Ctrl+K をプラットフォーム間で一貫して処理する方法は?

標準的なイディオム:if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); openPalette(); }。macOS では、e.metaKey が Cmd キーです。Windows/Linux では、e.ctrlKey がユーザーが期待するものです。両方を受け入れます。一部のブラウザではブラウザが Cmd+K を「アドレスバーフォーカス」にバインドするため、常に preventDefault。キー長押しでの発火を避けるために !e.repeat を追加します。

JavaScript はページ外のグローバルキーストロークを検出できますか?

いいえ、これはセキュリティのための設計です。ブラウザは、フォーカスされたページまたは要素に対してのみキーボードイベントを発生させます。ブラウザ拡張機能は、chrome.commands API を使用してより広い範囲でリッスンできます。Electron、Tauri などのネイティブアプリは、OS レベルのグローバルフックを使用できます。銀行および 2FA アプリはこの分離に依存しています:悪意のあるタブはパスワードマネージャをキーロギングできません。

「ちょうど押された」vs「押し続けている」を検出する正しい方法は?

トグルの場合、keydown ハンドラで !e.repeat をチェックします, 最初のイベントは repeat: false、後続の自動繰り返しイベントは repeat: true です。連続アクション(ゲーム移動)の場合、Set でキー状態を追跡します:keydown で追加、keyup で削除、次にレンダリングループで keysHeld.has("KeyW") をチェックします。これは入力をフレームレートから切り離し、複数の同時キー(移動 + ジャンプ)を処理します。

ここでキーを押すと、何かサーバーに送信されますか?

いいえ。キーイベントは JavaScript によってローカルでキャプチャされ、ネットワークリクエストなしでこのページに表示されます。DevTools で Network タブを開き、入力します。アウトバウンドトラフィックはゼロです。パスワードや機密ショートカットがキーボードで何を生成するかを発見することを含め、あらゆるコンテキストでテストするのに安全です。