← カテゴリ一覧に戻る

キーボード入力の検知

keydown keyup e.key e.code

キーボードイベントを検知して入力内容やショートカットキーを処理します。

デモ：キーボードイベントの検知

比較：e.key vs e.code

e.key は押されたキーの「値」、e.code は「物理的な位置」を表します。

押したキーe.keye.code
A"a""KeyA"
Shift + A"A""KeyA"
Enter"Enter""Enter"
スペース" ""Space"
数字の1（英キー）"1""Digit1"

💡 キーの「意味」で判断する場合は e.key、 物理位置で判断（ゲーム操作など）は e.code を使います。

コード例

js
document.addEventListener('keydown', (e) => {
  // 特定キーの検知
  if (e.key === 'Enter') console.log('Enter押下');
  if (e.key === 'Escape') closeModal();

  // ショートカットキー
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault(); // ブラウザのデフォルト保存を抑制
    save();
  }

  // Mac対応（Cmd + S）
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    save();
  }

  // 矢印キー
  switch (e.code) {
    case 'ArrowUp':    move('up'); break;
    case 'ArrowDown':  move('down'); break;
    case 'ArrowLeft':  move('left'); break;
    case 'ArrowRight': move('right'); break;
  }
});

// keyup: キーを離したとき
document.addEventListener('keyup', (e) => {
  if (e.key === 'Shift') setMultiSelect(false);
});

// ⚠️ keypress は非推奨（廃止予定）→ keydown を使う

⚠️ keypress は非推奨

keypress イベントは非推奨となり、将来的に削除される予定です。代わりに keydown または input を使用してください。

js
// ❌ 非推奨
el.addEventListener('keypress', handler);

// ✅ 代替
el.addEventListener('keydown', handler);  // キー押下の検知
el.addEventListener('input', handler);    // 値の変更の検知

🤖 AIプロンプトテンプレート

以下のようなキーボード入力処理のサンプルコードを生成してください：
- keydownイベントでe.keyとe.codeを使った特定キーの検知
- Ctrl+S、Cmd+Sなどのショートカットキーの処理（e.preventDefault()含む）
- 矢印キーによるフォーカス移動や要素操作
- e.shiftKey / e.ctrlKey / e.altKey / e.metaKeyの修飾キー判定
- keyupイベントを使ったキー離し検知の実装例

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo