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