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)。 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

Document: keyup イベント

例

addEventListener の keyup の例

onkeyup を用いた同等のもの

仕様書

ブラウザーの互換性

関連情報