コンテンツへスキップ
Keycode Tester
押したキーのkey・code・keyCode・修飾キーをリアルタイムで確認します。
ここをクリックしてキーを押してください
概要
- キーボードのキーを押した際に、ブラウザのKeyboardEventが持つkey・code・keyCode・which・修飾キー（Ctrl/Alt/Shift/Meta）の値をリアルタイムに表示するツールです。
- ブラウザやOSによってキー名の表記が異なる場合があるため、実際にキーを押して正しい値を確認できます。
- 確認した値をそのまま使えるJavaScriptの条件分岐コードも生成します。
使い方
- 下の入力エリアをクリックしてフォーカスします。
- 確認したいキーを押します。
- key・code・keyCodeなどの値と、判定用のコード例が表示されます。「コピー」ボタンでコード例をクリップボードにコピーできます。
入力例・出力例
入力
Ctrl + Shift + Enter を押す
出力
key: "Enter", code: "Enter", keyCode: 13
if (event.key === "Enter" && event.ctrlKey && event.shiftKey) {
// ...
}利用シーン
- キーボードショートカット機能を実装する際、対象キーのevent.key・event.codeの正しい値を確認する
- ブラウザやOS、キーボード配列の違いによるキー名の差異を調査する
- 非推奨のkeyCode/whichから、現在推奨されているkey/codeへ実装を移行する際の値を確認する
よくある質問
keyCodeとwhichは今でも使えますか？
多くのブラウザで動作しますが非推奨（Deprecated）です。新しい実装では、代わりにkeyまたはcodeの利用が推奨されています。
keyとcodeの違いは何ですか？
keyは入力される文字（配列やShift状態を反映した論理的な値）、codeは物理的なキーの位置を表す値です。例えばShift+1のkeyは"!"になりますが、codeは"Digit1"のままです。
ページ内の他の場所でキー入力しても反応しますか？
いいえ。入力エリアにフォーカスしている間のキー入力のみを検知します。ページ全体のキー操作は監視しません。
注意点
- IME（日本語入力など）で変換中のキー入力は、key: "Process"のように実際の文字と異なる値になる場合があります。
- 入力内容は外部に送信されず、すべてブラウザ内でのみ処理されます。