キーコード確認ツール
キーコード確認ツールとして、keyCode tester、event.key、event.code、修飾キーの状態をリアルタイムで表示します。
コンセプト
KeyboardEvent の key・code・keyCode確認
このツールはキー入力時に発生する KeyboardEvent の key、code、keyCode、which、location、修飾キー状態を比較し、ショートカット検証やイベントデバッグで確認できます。
特定キー組み合わせの入力値が想定と異なる場合、ショートカットバインドの競合やブラウザ既定動作の衝突を素早く特定できます。
値はブラウザエンジン、OS ポリシー、キーボードレイアウトで変わることがあるため、配信先環境で複数回検証してください。
何を確認するか
keyは入力文字、codeは物理キー、keyCode/whichおよびlocation、Ctrl・Alt・Shift・Meta状態を同時に確認します。
どんなシナリオで使うか
ショートカットのマッピング確認、入力イベントテスト、キー操作デバッグなどのブラウザ動作検証ステップで使います。
注意点
ブラウザや OS が予約するショートカットはページへ届かないことがあり、仮想キーボードでは一部値が空になる場合があります。
同じキー入力でもブラウザ・OS・レイアウト別に結果が異なることがあるため、環境別に確認する必要があります。
キーコード確認ツール キーコード確認の作業エリア
使い方
- 1 キー入力エリアをクリックしてフォーカスします。
- 2 確認したいキーまたはショートカットの組み合わせを押します。
- 3 JavaScript KeyboardEventのkey、code、keyCode、which、locationの値を確認します。
- 4 Ctrl、Alt、Shift、Metaなど修飾キーの状態も確認します。
主な使用例
- キーボードのキーコード確認
- ショートカット実装用のキー値確認
- キーボードイベントのデバッグ
- Ctrl/Alt/Shiftの組み合わせ状態確認
よくある質問
キーコード確認ではどの情報を見られますか？
入力エリアでキーを押すと、key、code、keyCode、which、locationの値と、Ctrl、Alt、Shift、Metaの修飾キー状態をリアルタイムで表示します。
keyCode、event.key、event.codeの違いも確認できますか？
はい。同じキー入力に対してkeyCode、which、event.key、event.codeを並べて表示するため、JavaScriptのキーボードイベント実装を比較できます。
結果をコピーするボタンはありますか？
はい。コピー ボタンでキーイベント解析結果のJSONをコピーできます。特定の値だけ必要な場合は、画面に表示されたテキストを選択してコピーすることもできます。
すべてのキー入力を取得できますか？
ブラウザやOSが予約しているショートカットはページまで届かないことがあり、モバイルの仮想キーボードでは一部のキーイベント情報が提供されない場合があります。