任意のキーのevent.key、event.code、keyCode、event.locationを表示 Ctrl、Shift、Alt、Metaの状態とキーリピートを表示押したキー用のコピーできるJavaScriptのif文最近押したキーの履歴テスト中はSpaceや矢印キーによるスクロールを抑止

JavaScriptキーコード確認 - event.key、event.code、keyCode

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

ブラウザでキーを押すたびに、いくつかのプロパティを持つKeyboardEventが発生します。event.keyは"a"、"A"、"Enter"、"ArrowUp"のようにキーが生み出す値で、ユーザーのキー配列やShiftの状態に従います。event.codeは"KeyA"や"Digit1"のように物理的なキーを表し、QWERTY、AZERTY、Dvorakのどの配列でも同じです。keyCodeとwhichは古い数値コードで、非推奨であり、ブラウザや配列によって一貫しません。現代のコードでは、文字入力やショートカットにはevent.keyを、ゲームのWASD操作のように位置が重要な場合はevent.codeを使います。

機能

• 任意のキーのevent.key、event.code、keyCode、event.locationを表示
• Ctrl、Shift、Alt、Metaの状態とキーリピートを表示
• 押したキー用のコピーできるJavaScriptのif文
• 最近押したキーの履歴
• テスト中はSpaceや矢印キーによるスクロールを抑止

プライバシーに配慮

キーイベントはこのページのブラウザ内でのみ読み取られます。押したキーが記録・送信されることはありません。

キーロガーなし、100%クライアント側。

キーコード確認の使い方

1
ページのどこかをクリックしてフォーカスを当て、キーを押します。スマホでは入力欄をタップして画面キーボードを開きます。
2
大きく表示される値がevent.keyです。その下にevent.codeと従来のkeyCodeが表示されます。
3
カードでキーの位置(左右のShift、テンキー)や押されていた修飾キーを確認し、ワンクリックで値をコピーします。
4
生成されたif文をkeydownハンドラーにコピーします。履歴で最近のキーを比べられます。

活用例

キーボードショートカット

Ctrl+KやCmd+Kで検索を開くなら、組み合わせを押してevent.key === "k"とevent.ctrlKey || event.metaKeyを使えば、WindowsとmacOSの両方で動きます。

ゲームの操作

event.code("KeyW"、"KeyA"、"KeyS"、"KeyD")を使えば、event.keyが"z"や"q"になるAZERTYなどの配列でも移動キーが同じ位置に保たれます。

Enterで送信

チャット入力でevent.key === "Enter"かつ!event.shiftKeyを確認し、Enterで送信、Shift+Enterで改行にします。

テンキーと左右のキー

アプリで必要なら、テンキーのEnter(location 3)とメインのEnter、左右のShift(location 1と2)を区別します。

よくある質問

event.keyとevent.codeのどちらを使う?+

文字に結び付く操作、たとえば英字のショートカット、テキスト入力、EscapeやEnterにはevent.keyを使います。ゲームや配列に依存しないホットキーなど、物理的な位置が重要ならevent.codeです。

keyCodeが非推奨なのはなぜ?+

keyCodeの値は標準化されておらず、ブラウザ、キー配列、keydownとkeypressで異なります。KeyboardEventの標準ではkeyとcodeに置き換えられ、すべての現代のブラウザが対応しています。

スマホのキーボードで"Unidentified"や229になるのはなぜ?+

画面キーボードは本当のキーコードではなくcompositionイベントを送ることが多く、特に自動修正やIME入力では顕著です。モバイルでの文字入力はinputやbeforeinputイベントを使ってください。

一部のショートカットがページに届かないのはなぜ?+

Ctrl+W、Ctrl+T、Cmd+Q、Alt+Tabなど一部の組み合わせはブラウザやOSが先に処理するため、Webページでは捕捉も抑止もできません。