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 2015年7月.

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

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

キーボード操作の対象となるイベントのターゲットは、現在フォーカスされている、キーボード操作を処理している要素です。これには、<input>、<textarea>、contentEditable がついた何らかの要素、および、<a>、<button>、<summary> など、キーボードで操作できる何らかの要素が含まれます。適切な要素にフォーカスが当たっていなければ、イベントのターゲットは<body> またはルートになります。イベントが捕捉されなければ、イベントはDOM ツリーをDocument に達するまでバブリングします。

イベントのターゲットは、異なるキーイベント間で変更されることがあります。例えば、Tab キーを押したときのkeydown のターゲットは、keyup のターゲットとは異なるものになるでしょう。フォーカスが変更されるからです。

構文

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

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

イベント型

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

イベントプロパティ

このインターフェイスには親である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.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></p>

const input = document.querySelector("input");const log = document.getElementById("log");input.addEventListener("keyup", logKey);function logKey(e) {  log.textContent += ` ${e.code}`;}

keyup イベントと IME

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

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

メモ:keydown とは異なり、keyup イベントには IME イベントのための即別なkeyCode 値がありません。しかし、keydown と同様に、 IME を開くための最初の文字を入力したときに、compositionstart がkeyup の後に発行されたり、compositionend がkeyup の前に発行されたりすることがあります。これらの場合、イベントが変換の一部であっても、isComposing は false となります。