本文へスキップ
にゃんこツール

キーコード(e.code/e.key)チェッカー

下の入力エリアをクリックしてフォーカスし、任意のキーを押すと、event.key・event.code・keyCode・location・修飾キーの状態をリアルタイムで表示します。JavaScriptのキーボードイベント処理を実装する際の、実機での値確認やevent.keyとevent.codeの違いの確認に便利です。ブラウザ内で処理され、押したキーの情報がサーバーに送信されることはありません。入力値のパターンマッチングを試したい場合は 正規表現テスター もあわせてご利用ください。

🔒 ブラウザ内で完結・入力データはサーバーに送信されません

ここをクリックしてフォーカスし、任意のキーを押してください

履歴(最新10件)

    注意事項

    • キー入力を検知するには、上の入力エリアをクリックしてフォーカスしてから任意のキーを押してください。
    • 入力エリアにフォーカスしている間は、Tabキーによるフォーカス移動やF5キーの再読み込みなど、ブラウザ標準の動作を防止して表示します(エリア外をクリックする、またはEscapeキーを押すと通常の動作に戻ります)。
    • 日本語入力(IME)で変換中に押したキーは、環境によってevent.keyが"Process"などの特殊な値になる場合があります。
    • キーボードの配列(JIS配列/US配列等)によって、同じ物理キーでもevent.keyの値が異なる場合があります。event.codeは配列に依存しない物理的な位置を表します。
    • ブラウザ・OSの組み合わせによっては、メディアキーやブラウザに予約されたショートカットキーなど、検出できないキーもあります。

    用語解説

    event.key

    押されたキーが表す「文字」または機能名を表します(例: "a"、"Enter"、"ArrowUp")。キーボード配列やShiftキーの状態、IME変換中かどうかによって値が変わることがあります。

    event.code

    キーボード上の「物理的な位置」を表す文字列です(例: "KeyA"、"Digit1")。数字キーの「1」を押したとき、Shiftキーの状態でevent.keyは"1"や"!"に変わりますが、event.codeは常に"Digit1"のままで、キーボード配列にも依存しません。

    KeyboardEvent.location

    Shift・Ctrl・Alt・Enterなど、キーボード上に複数存在するキーを区別するための値です。0が標準、1が左側、2が右側、3がテンキー側のキーを表します。

    keyCode / which(非推奨)

    キーを数値で表す古いブラウザAPIです。ブラウザや配列によって値の解釈が揺れることがあるため非推奨とされており、新規実装ではevent.keyやevent.codeを使うことが推奨されています。

    修飾キー(モディファイアキー)

    Ctrl・Alt・Shift・Metaなど、他のキーと組み合わせて使う特殊キーの総称です。Metaキーは、Windowsではウィンドウズキー、Macではcommandキーに対応します。

    よくある質問

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

    event.keyは入力される文字や意味(例: "a")を表し、キーボード配列や修飾キーで変わります。event.codeは物理的なキーの位置(例: "KeyA")を表し、配列に依存しません。ゲームのキー操作ではcodeが向いています。

    keyCodeは使ってもよいですか?

    keyCodeは非推奨です。新しいコードではevent.keyまたはevent.codeを使うことが推奨されています。このツールでは古いコードの動作確認用に表示しています。

    日本語入力中に押したキーが「Process」と表示されるのはなぜですか?

    IMEで変換中に押したキーは、環境によってevent.keyが「Process」などの特殊な値になるためです。入力エリアにフォーカスしたうえでIMEをオフにして試してください。

    このページをシェア

    ↑↓ 選択 Enter 開く Esc 閉じる