Element: keyup イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

キーボードイベントは <input>, <textarea>, <summary> と contentEditable または tabindex 属性を持つものだけが生成します。

Firefox 65 以降では、CJKT ユーザーのブラウザー間の互換性を高めるために、 keyup および keydown イベントが IME 変換中に発行されるようになりました（Firefox バグ 354358）。変換操作中の keyup イベントをすべて無視するには、次のようにしてください （229 は、IME によって処理されたイベントに関連する keyCode に設定される特別な値です）。

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

構文

イベント名を addEventListener() などのメソッドで使用したり、イベントハンドラープロパティを設定したりします。

js
addEventListener("keyup", (event) => {});

onkeyup = (event) => {};

イベント型

KeyboardEvent です。 Event から継承しています。

Event UIEvent KeyboardEvent

イベントプロパティ

このインターフェイスには親である UIEvent や Event から継承したプロパティもあります。

KeyboardEvent.altKey 読取専用

論理値で、このキーイベントが発生した際に Alt （macOS の場合は Option または ⌥）キーが押されていれば true を返します。

KeyboardEvent.code 読取専用

文字列で、このイベントが表す物理キーのコード値を返します。

警告: これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが QWERTY キーボードレイアウトの "Y" の位置（ホーム行の上の行の中央付近）でキーを押した場合、ユーザーが QWERTZ キーボード（これはユーザーが "Z" を期待し、他のすべてのプロパティが "Z" を示すことになる）または Dvorak キーボードレイアウト（これはユーザーが "F" を期待する）であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、 Keyboard.getLayoutMap() を使用してください。

KeyboardEvent.ctrlKey 読取専用

論理値で、そのキーイベントが発生した際に Ctrl キーが押されていれば true を返します。

KeyboardEvent.isComposing 読取専用

論理値で、このイベントが compositionstart と compositionend の間に発生したものであれば true を返します。

KeyboardEvent.key 読取専用

文字列で、このイベントが表すキーのキー値を表します。

KeyboardEvent.locale 読取専用

文字列で、キーボードに設定されているロケールを示すロケール文字列を返します。ブラウザーや端末がキーボードのロケールを知らない場合は空文字列となります。

メモ: このプロパティは入力データのロケールを表すわけではありません。例えば、ユーザーが使用するキーボードレイアウトと入力テキストとで言語が異なる場合があります。

KeyboardEvent.location 読取専用

数値で、キーボードなどの入力機器上のキーの位置を表す値を返します。位置を特定する定数の一覧は、キーボード上の位置にあります。

KeyboardEvent.metaKey 読取専用

論理値で、このキーイベントが発生した際に Meta キー（Mac キーボードでは ⌘ Command キー、 Windows キーボードでは Windows キー (⊞)）が押されていれば true を返します。

KeyboardEvent.repeat 読取専用

論理値で、このキーが押し続けられて自動リピートしている場合に true を返します。

KeyboardEvent.shiftKey 読取専用

論理値で、このキーイベントが発生した際に Shift キーが押されていれば true を返します。

例

addEventListener による keyup の例

この例では、 <input> 要素内でキーを離すたびに、 KeyboardEvent.code 値を記録します。

html
<input
  placeholder="ここをクリックして、キーを押して離してください。"
  size="40" />
<p id="log"></p>
js
const input = document.querySelector("input");
const log = document.getElementById("log");

input.addEventListener("keyup", logKey);

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

onkeyup による同等の例

js
input.onkeyup = logKey;

仕様書

Specification
UI Events
# event-type-keyup
HTML Standard
# handler-onkeyup

ブラウザーの互換性

BCD tables only load in the browser

関連情報