Element: keyup 事件

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

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

onkeyup = (event) => { }

事件类型

一个 KeyboardEvent。继承自 UIEvent 和 Event。

事件属性

此接口还继承其父级 UIEvent 和 Event 的属性。

KeyboardEvent.altKey 只读

返回一个布尔值，如果生成按键事件时 Alt 键（macOS 上为 Option 或 ⌥ 键）处于活动状态，则返回 true。

KeyboardEvent.code 只读

返回一个字符串，其中包含事件所代表的物理键的代码值。

警告： 这会忽略用户的键盘布局，因此如果用户在 QWERTY 键盘布局中按下 "Y" 位置的键（在主行上方一行的中间附近），这将始终返回 "KeyY"，即使用户使用的是 QWERTZ 键盘（这意味着用户期望一个 "Z"，所有其他属性也将指示一个 "Z"）或 Dvorak 键盘布局（用户期望一个 "F"）。如果你想向用户显示正确的按键，可以使用 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 值。

<input placeholder="Click here, then press and release a key." size="40" />
<p id="log"></p>

const input = document.querySelector("input");
const log = document.getElementById("log");

input.addEventListener("keyup", logKey);

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

IME 的 keyup 事件

自 Firefox 65 起，keydown 和 keyup 事件现在在输入法编辑器合成期间触发，以改善 CJKT 用户的跨浏览器兼容性（Firefox bug 354358）。要忽略所有作为合成一部分的 keyup 事件，请执行以下操作：

eventTarget.addEventListener("keyup", (event) => {
  if (event.isComposing) {
    return;
  }
  // do something
});

规范

浏览器兼容性

另见

• input
• keydown
• keypress