元素：keypress 事件

在 addEventListener() 等方法中使用事件名称，或设置事件处理器属性。

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

onkeypress = (event) => {};

KeyboardEvent。继承自 Event。

该接口还继承了其父接口 UIEvent 和 Event 的属性。

KeyboardEvent.altKey 只读

返回一个布尔值，如果在发生此事件时按下 Alt（macOS 上的 Option 或 ⌥）键，则返回 true。

KeyboardEvent.code 只读

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

警告： 此方法忽略用户的键盘布局，因此，如果用户按下 QWERTY 键盘布局中“Y”位置（在主键盘区域上方的一行中间），即使用户使用 QWERTZ 键盘（这意味着用户期望“Z”，而且所有其他属性都指示为“Z”）或 Dvorak 键盘布局（其中用户期望“F”），此方法仍将始终返回“KeyY”。如果你想向用户显示正确的按键信息，则可以使用 Keyboard.getLayoutMap() 方法。

KeyboardEvent.ctrlKey 只读

返回一个布尔值，如果生成键事件时 Ctrl 键处于激活状态，则为 true。

KeyboardEvent.isComposing 只读

返回一个布尔值，如果事件在 compositionstart 之后、compositionend 之前触发，则为 true。

KeyboardEvent.key 只读

返回一个字符串，表示由事件表示的键的键值。

KeyboardEvent.locale 只读

返回一个表示键盘配置的区域设置的语言环境字符串。如果浏览器或设备不知道键盘的语言环境，则可能是空字符串。

备注： 这并不描述正在输入的数据的区域设置。用户可能在使用一种键盘布局时在输入不同语言的文本。

KeyboardEvent.location 只读

返回一个数字，表示键在键盘或其他输入设备上的位置。标识位置的常量列表如上面的键盘位置部分所示。

KeyboardEvent.metaKey 只读

如果在生成按键事件时 Meta 键（在 Mac 键盘上是 ⌘ Command 键，在 Windows 键盘上是 Windows 键（⊞））处于活动状态，则返回一个布尔值，该布尔值为 true。

KeyboardEvent.repeat 只读

如果该按键被按住并且正在生成自动重复事件，则此函数返回一个布尔值 true。

KeyboardEvent.shiftKey 只读

如果在生成按键事件时 Shift 键处于激活状态，则返回一个布尔值，该布尔值为 true。

该示例在聚焦 <input> 元素后，每当你按下一个键时，记录 KeyboardEvent.code 的值。

<div>
  <label for="sample">请将光标放在 input 元素上并输入一些内容：</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}`;
}

• 事件同样也适用于 Document 接口。
• 相关事件：
  • input
  • keydown
  • keyup