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