Document: keydown イベント

keydown イベントは、キーが押されたときに発生します。

keypress イベントとは異なり、 keydown イベントはすべてのキーにおいて、文字が入力されるかどうかにかかわらず発生します。

keydown および keyup イベントが、どのキーが押されたのかを示すコードを提供するのに対し、 keypress はどの文字が入力されたかを示します。例えば、小文字の "a" は keydown および keyup では65になるのに対し、 keypress では97になります。大文字の "A" はどのイベントでも65と報告されます。

Firefox 65 から、 keydown および keyup イベントは IME 入力中でも発生するようになり、 CJKT のユーザーのブラウザー間の互換性が向上しました (バグ 354358、またもっと有益な詳細は keydown and keyup events are now fired during IME composition を参照)。 IME 入力中のすべての keydown イベントを無視するには、次のようにします (229 は IME によって処理されたイベントに関連する keyCode の特殊な値のセットです)。

eventTarget.addEventListener("keydown", event => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // 何かをする
});

例

addEventListener keydown の例

この例はキーを押すたびに KeyboardEvent.code の値をログ出力します。

<p>Focus the IFrame first (e.g. by clicking in it), then try pressing some keys.</p>
<p id="log"></p>

document.addEventListener('keydown', logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

onkeydown equivalent

document.onkeydown = logKey;

仕様書

ブラウザーの互換性

関連情報

• keypress
• keyup
• Element の keydown イベント