Element: keyup event
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 事件在按键被松开时触发。
| 冒泡 | 是 |
|---|---|
| 可取消 | 是 |
| 接口 | KeyboardEvent |
| 事件处理函数属性 |
onkeyup
|
keydown 和 keyup 事件提供指出哪个键被按下的代码,而 keypress 指出哪些字符被输入。例如,小写字母“a”在 keydown 和 keyup 时会被报告为 65,但在 keypress 时为 97。所有事件均将大写字母“A”报告为 65。
从 Firefox 65 开始,keyup 和 keydown 事件在 IME 编辑时也会被触发,以提升 CJKT 用户的跨浏览器兼容性(Firefox bug 354358)。要忽略 IME 编辑时的所有 keyup 事件,请执行以下操作(229 是一个关于被 IME 加工过的事件的 keyCode 的特殊值):
js
eventTarget.addEventListener("keyup", (event) => {
if (event.isComposing || event.keyCode === 229) {
return;
}
// do something
});
例子
>addEventListener keyup 例子
在这个例子中,每当你在 <input> 元素里松开一个键,将会打印 KeyboardEvent.code 的值。
html
<input placeholder="Click here, then press and release a key." 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> # handler-onkeyup> |
浏览器兼容性
Loading…