--- title: 'Document: keyup イベント' slug: Web/API/Document/keyup_event tags: - DOM - Document - Event - KeyboardEvent - Reference - keyup - イベント translation_of: Web/API/Document/keyup_event ---
{{APIRef}}

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

バブリング あり
キャンセル 可
インターフェイス {{domxref("KeyboardEvent")}}
イベントハンドラープロパティ {{domxref("GlobalEventHandlers.onkeyup", "onkeyup")}}

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

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

Firefox 65 から、 {{domxref("Document/keydown_event", "keydown")}} および keyup イベントは IME 入力中でも発生するようになり、 CJKT のユーザーのブラウザー間の互換性が向上しました ({{bug(354358)}})。 IME 入力中のすべての keyup イベントを無視するには、次のようにします (229 は IME によって処理されたイベントに関連する keyCode の特殊な値のセットです)。

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

例

この例はキーを離すたびに {{domxref("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}`;
}

{{EmbedLiveSample("addEventListener_keyup_example")}}

onkeyup を用いた同等のもの

document.onkeyup = logKey;

仕様書

仕様書 状態
{{SpecName("UI Events", "#event-type-keyup")}} {{Spec2("UI Events")}}

ブラウザーの互換性

{{Compat("api.Document.keyup_event")}}

関連情報