Element: keypress 事件

语法

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

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

onkeypress = (event) => { }

事件类型

一个 KeyboardEvent。继承自 UIEvent 和 Event。

事件属性

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

KeyboardEvent.altKey 只读

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

KeyboardEvent.code 只读

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

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 keypress 示例

此示例会在您聚焦 <input> 元素后按下任意键时，记录 KeyboardEvent.code 的值。

要查看哪些键会触发 keypress 事件，哪些键不会，请尝试按下以下键：

• 字母键、数字键和标点符号键
• 符号键，例如 $、+、=、% 和 + 键
• 修饰键，例如 Alt、Shift、Ctrl、Meta、Esc、Option 或 ⌘ 键
• Enter 键
• Enter 键与 Shift 键或 Ctrl 键组合按下
• Enter 键与 Shift 键或 Ctrl 键之外的其他修饰键组合按下

<div>
  <label for="sample">Focus the input and type something:</label>
  <input type="text" name="text" id="sample" />
</div>
<p id="log"></p>

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

input.addEventListener("keypress", logKey);

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

onkeypress 等效

input.onkeypress = logKey;

规范

浏览器兼容性

另见

• 事件也以其为目标的 Document 接口。
• 相关事件
  • input
  • keydown
  • keyup