キーボードイベントコード - JavaScriptキーイベントビューアー オンライン
任意のキーを押してJavaScriptキーボードイベントのプロパティをリアルタイムで確認。event.key、event.code、keyCode、修飾キーの状態などを表示 — 100%クライアントサイド、サーバーへのデータ送信なし。
よくある質問
キーボードイベントコードビューアーとは何ですか？
キーボードイベントコードビューアーは、キーボードのキーを押すとJavaScript KeyboardEventのすべてのプロパティを表示するオンラインツールです。event.key（文字またはキー名）、event.code（物理キー識別子）、event.keyCode（数値コード）、修飾キーの状態などの値を表示します。開発者がWebアプリケーションでキーボードインタラクション、ゲーム、アクセシビリティ機能、フォームバリデーションを構築する際に、正しいイベントプロパティ値をすばやく調べるために使用します。
このキーボードイベントコードツールの使い方は？
ページ上部のキャプチャエリアをクリックし、キーボードのキーを押してください。ツールは key、code、keyCode、which、location、修飾キーの状態を含むすべてのイベントプロパティを即座に表示します。タブを使用してkeydown、keyup、keypressイベントタイプを切り替えられます。コピーボタンで個別の値またはイベントデータ全体をJSONとしてコピーできます。下のイベント履歴ログで最近のキー入力を比較できます。
データは安全ですか？キー入力は記録されますか？
すべてのキーボードイベントキャプチャは100%ブラウザ内で行われます。キー入力、イベントデータ、その他の情報はサーバーに送信されません。このツールは外部サービスを呼び出さず、ネイティブブラウザのKeyboardEvent APIを使用します。キー入力は履歴ログのためにブラウザメモリに一時的に保存されるだけで、ページを閉じると削除されます。セキュリティに敏感な環境でも安全に使用できます。
event.keyとevent.codeの違いは何ですか？
event.keyはキーボードレイアウトと修飾キーに応じて変化する論理的なキー値を表します。例えば、'A'キーを押すと通常はkey: 'a'、Shiftを押しながらだとkey: 'A'になります。event.codeはレイアウトや修飾キーに関係なく、キーボード上の物理的なキー位置を表します。同じ物理キーは常にcode: 'KeyA'を返します。テキスト入力処理にはevent.keyを、ゲームコントロールやレイアウト非依存のアクションにはevent.codeを使用してください。
keyCode、which、charCodeはなぜ非推奨なのですか？
これらのプロパティはブラウザやキーボードレイアウト間で一貫性がないため非推奨です。event.keyCodeは異なるOSで同じキーに対して異なる数値を返します。現代的な代替はevent.key（文字値用）とevent.code（物理キー用）です。すべての最新ブラウザがこれらの新しいプロパティをサポートしており、プラットフォーム間で一貫した予測可能な値を提供します。
event.locationは何を教えてくれますか？
event.locationはキーがキーボードのどこに位置するかを示します。数値を返します：ほとんどのキーは0（Standard）、左Shiftや左Ctrlなどの左側修飾キーは1（Left）、右側修飾キーは2（Right）、テンキーのキーは3（Numpad）です。左右のShiftキーを区別したり、メインのEnterキーとテンキーのEnterキーを区別する必要がある場合に便利です。
keydownとkeyupイベントの違いは何ですか？
keydownはキーが押された瞬間に発火し、キーを押し続けるとevent.repeatがtrueの状態で繰り返し発火します。keyupはキーを離した時に一度だけ発火します。非推奨のkeypressイベントはkeydownとkeyupの間に発火しますが、文字値を生成するキーでのみ動作します（Shift、Ctrl、矢印キーなどでは発火しません）。ほとんどの場合、keydownが推奨されるイベントです。
コード例
// Keyboard Event Handling in JavaScript
// Basic keydown event listener
document.addEventListener('keydown', (event) => {
console.log('key:', event.key); // "a", "Enter", "Shift"
console.log('code:', event.code); // "KeyA", "Enter", "ShiftLeft"
console.log('keyCode:', event.keyCode); // 65, 13, 16 (deprecated)
console.log('location:', event.location); // 0, 0, 1
// Modifier key states
console.log('shiftKey:', event.shiftKey);
console.log('ctrlKey:', event.ctrlKey);
console.log('altKey:', event.altKey);
console.log('metaKey:', event.metaKey);
console.log('repeat:', event.repeat);
});
// Using event.code for layout-independent controls (e.g., WASD)
document.addEventListener('keydown', (event) => {
switch (event.code) {
case 'KeyW': moveForward(); break;
case 'KeyA': moveLeft(); break;
case 'KeyS': moveBackward(); break;
case 'KeyD': moveRight(); break;
case 'Space': jump(); break;
}
});
// Detecting modifier combinations
document.addEventListener('keydown', (event) => {
if (event.ctrlKey && event.key === 's') {
event.preventDefault();
saveDocument();
}
if (event.metaKey && event.key === 'k') {
event.preventDefault();
openCommandPalette();
}
});
// Extracting full event data as an object
function extractKeyEventData(event) {
return {
type: event.type,
key: event.key,
code: event.code,
keyCode: event.keyCode,
which: event.which,
charCode: event.charCode,
location: event.location,
repeat: event.repeat,
isComposing: event.isComposing,
shiftKey: event.shiftKey,
ctrlKey: event.ctrlKey,
altKey: event.altKey,
metaKey: event.metaKey,
};
}
document.addEventListener('keydown', (event) => {
const data = extractKeyEventData(event);
console.log(JSON.stringify(data, null, 2));
});