Document: keyup イベント

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

バブリング あり
キャンセル 可
インターフェイス KeyboardEvent
イベントハンドラープロパティ onkeyup

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

注: 入力値の変更に反応する方法を探しているのであれば、 input イベントを使用してください。 keyup では、テキスト入力のコンテキストニューからテキストを貼り付けた場合など、一部の変更が検出されません。

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

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

例

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

addEventListener の keyup の例

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

document.addEventListener('keyup', logKey);

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

onkeyup を用いた同等のもの

document.onkeyup = logKey;

仕様書

仕様書 状態
UI Events 草案

ブラウザーの互換性

BCD tables only load in the browser

関連情報