キーコード確認ツール（JavaScriptのkey・code・keyCode）

使い方

1. 「キーを押すエリア」をクリックするか、Tab キーで選びます
2. 調べたいキーを押します。event.key・event.code・keyCode などの値と、Ctrl + Shift + Z のようなショートカット表記がすぐに表示されます
3. 「判定するコード」で event.key（入力される文字）と event.code（キーの位置）のどちらで判定するかを選び、コード例をコピーします
4. 日本語入力の変換中やスマホの画面キーボードの値を見るときは、「IME・スマホのキーボードで試す入力欄」に入力します
5. 押した順の記録は「イベントの履歴」に残り、TSVでコピーして表計算ソフトに貼り付けられます

エリアの図は、押したキーを event.code の位置で示します。押している間は塗りつぶし、最後に押したキーは太い枠、それまでに押したキーは薄い色で残るので、キーボードのキーを1つずつ押して反応を確かめるときにも使えます。event.code は US 配列の位置の名前なので、JIS 配列で「@」を押すと BracketLeft の位置に印が付きます。図の下の「図の配列」で JIS と US を切り替えられます（日本語のページは JIS、英語のページは US から始まります）。「図の印を消す」を押すと、薄い色と太い枠の印が消え、「これまでに押したキー」の数（event.code ごとに数え、図にないキーも含みます）も0に戻ります。テンキー、選んだ配列にないキー（US の図での ¥ など）、Mac の「英数」「かな」キー（Lang2・Lang1）、event.code が空のキーは図に示せないので、図の下にそう表示します。Mac の Caps Lock は、オンにしたときに keydown、オフにしたときに keyup が届くことがあり、その場合はエリアを選んでいる間、ロックがかかっているあいだ押している印のままになることがあります。

エリアを選んでいる間は、Tab 以外のキーのブラウザの動作（スペースでのスクロール、F5 での再読み込みなど）を止めて値だけを表示します。Tab を押すと次の項目へ移れます。押したキーや入力した文字はブラウザの外へ送信されず、保存もされません。

表示される値

• event.key: 入力される文字か、キーの名前です。a と Shift を押しながらの A は別の値になり、日本語配列と US 配列でも変わります。スペースは " "（空白1文字）です
• event.code: キーボード上の位置の名前です。配列や Shift にかかわらず、A の位置のキーは常に KeyA です。名前は US 配列の位置で付いているので、JIS 配列の「@」キーは BracketLeft になります
• event.keyCode / event.which: 古い数値のコードです。非推奨で、ブラウザや配列によって値が違うことがありますが、古いコードを読むときのために表示します
• event.location: 左右に同じキーがあるときの区別です。0 は標準、1 は左、2 は右、3 はテンキーです
• 修飾キー: ctrlKey・shiftKey・altKey・metaKey（Windows キーや Mac の ⌘）が押されていたかどうかです
• ロックキーの状態: getModifierState() で読んだ Caps Lock と Num Lock のオン・オフです
• isComposing: 日本語入力などで変換の途中だったかどうかです

判定するコードの例

Ctrl と Shift を押しながら Z を押し、「event.key（入力される文字）」を選ぶと、次のようなコードが表示されます。

document.addEventListener("keydown", (event) => {
  // IMEで変換中のキーは無視する
  if (event.isComposing || event.keyCode === 229) return;
  if (event.key === "Z" && event.ctrlKey && !event.altKey && event.shiftKey && !event.metaKey) {
    event.preventDefault();
    // ここに処理を書く
  }
});

4つの修飾キーすべての有無を書き出すので、Z の判定が Ctrl + Z で動いたり、Ctrl + Z の判定が Ctrl + Shift + Z でも動いたりすることを防げます（修飾キーそのものを押したときは、キーの名前だけで判定します）。Shift を押すと event.key は大文字の "Z" になる点に注意してください。

• event.key で判定する: 「? キーでヘルプを開く」のように、入力される文字に意味があるとき。配列が違っても、同じ文字が入力されれば一致します。ただしコード例は押したときの修飾キーの組み合わせも判定します。ドイツ語配列の @ は AltGr + Q で入力するなど、配列によって同じ文字の組み合わせが変わるので、文字だけで判定したいときは修飾キーの条件を消してください
• event.code で判定する: ゲームの WASD 移動のように、キーの位置に意味があるとき。日本語配列でも US 配列でも同じ位置のキーで動きます

日本語入力とJIS配列のキー

• 変換中のキー（keyCode 229）: 日本語入力で変換を確定する Enter は、keyCode が 229 で届き、多くのブラウザでは isComposing も true です。ブラウザによっては isComposing が false のまま届くことがあるので、Enter で送信するフォームが変換の確定で送信されてしまう不具合は、どちらか一方に当てはまれば除外する形で防ぎます。入力欄で試すと、compositionstart から compositionend までの順番も履歴で確かめられます
• 変換・無変換・カタカナ/ひらがな: event.code はそれぞれ Convert・NonConvert・KanaMode です
• 半角/全角: event.code は US 配列の同じ位置の Backquote です。event.key はブラウザやIMEの状態で変わります
• ¥ と ＼ ろ: US 配列にないキーで、event.code は IntlYen と IntlRo です
• Mac の英数・かな: 仕様では event.code が Lang2（英数）と Lang1（かな）です
• Windows の英数: JIS 配列では Caps Lock と同じ位置のキーで、event.code は CapsLock です

これらのキーの keyCode はブラウザ・OS・IMEの状態で違うので、一覧では「—」にしています。実際に押して確かめてください。

FAQ

keyCode はもう使わないほうがいいですか？

はい。keyCode と which は非推奨で、記号のキーではブラウザによって値が違います（たとえば ; は Chrome で 186、Firefox で 59）。新しく書くコードでは event.key か event.code を使ってください。例外として、IMEの変換中を見分ける keyCode === 229 は、isComposing が false のまま届くブラウザがあるため、併用がすすめられています。

押しても何も表示されないキーがあります

Ctrl + W（タブを閉じる）や Ctrl + Tab などは、ブラウザやOSがページより先に処理するので、ページにイベントが届きません。Mac の Fn キーも、多くの場合は単独のイベントになりません。

スマホで key が Unidentified になります

Android などの画面キーボードは、文字が確定するまで key を Unidentified、keyCode を 229 にして送ることが多いためです。入力された文字は input イベントの data で読めます。「IME・スマホのキーボードで試す入力欄」で入力すると、履歴の input の行に表示されます。

キーボードが壊れていないかの確認にも使えますか？

使えます。キーを押して値が表示されれば、そのキーの信号はブラウザまで届いています。エリアの図では押したことのあるキーに薄い色が残るので、まだ押していないキーが一目で分かります。「押しているキー」と図の塗りつぶしで同時に押したキーを確かめ、「同時に押したキーの最大」で何個まで同時に認識されるかも見られます。ただし、OSやブラウザが先に処理するキーは表示されません。

keypress イベントは表示されませんか？

表示しません。keypress は非推奨で、文字を入力しないキーでは発生しないなどブラウザの差が大きいためです。文字の入力を扱うときは input イベント（beforeinput）を使うのが現在のやり方です。