元素:keypress 事件

已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它,但也许已从相关的 web 标准中移除,也许正准备移除或出于兼容性而保留。请尽量不要使用该特性,并更新现有的代码;参见本页面底部的兼容性表格以指导你作出决定。请注意,该特性随时可能无法正常工作。

当按下产生字符或符号值的键时,将触发 keypress 事件。

产生字符值的键包括字母、数字和标点符号键。不产生字符值的键是修饰键,例如 AltShiftCtrlMeta 键。

警告: 由于此事件已被弃用,你应该改用 beforeinputkeydown

语法

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

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

onkeypress = (event) => {};

事件类型

事件属性

该接口还继承了其父接口 UIEventEvent 的属性。

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

示例

addEventListener 按键示例

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

html
<div>
  <label for="sample">请将光标放在 input 元素上并输入一些内容:</label>
  <input type="text" name="text" id="sample" />
</div>
<p id="log"></p>
js
const log = document.getElementById("log");
const input = document.querySelector("input");

input.addEventListener("keypress", logKey);

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

等同于 onkeypress

js
input.onkeypress = logKey;

规范

Specification
UI Events
# event-type-keypress
HTML
# handler-onkeypress

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
keypress event
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.
See implementation notes.

参见