Element: 键盘按下事件

您正在阅读此内容的英文版本,因为该语系尚未翻译。 帮助我们翻译此文章吧!

keydown事件触发于键盘按键按下的时候。

keypress 事件不同的是, 所有按键均会触发keydown事件,无论这些按键是否会产生字符值。

Bubbles Yes
Cancelable Yes
Interface KeyboardEvent
Event handler property onkeydown

keydown 与 keyup 事件捕获了键盘按键的操作,而 keypress 反映了具体输入某个字符的值。比如, 小写"a" 在keydown 和 keyup事件中输出的是大写A的Unicode编码65,但是在keypress中输出的就是小写"a"的Unicode编码97。大写 "A"在这些事件中输出的都是Unicode编码65。

键盘事件只能由 <inputs>, <textarea> 以及任何具有  contentEditable 或 tabindex="-1"属性的组件触发。

自 Firefox 65起,  keydown 与 keyup 事件会在IME(输入法编辑器)复合事件中被触发,目的是为了提升CJKT(中日韩台地区)用户跨浏览器性能, (bug 354358,更多详情访问 keydown and keyup events are now fired during IME composition ). 若要忽略复合事件中所有 keydown 事件, 可以按照如下代码修改 (229是某个在IME中触发的键盘事件对应的 keyCode):

eventTarget.addEventListener("keydown", event => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // do something
});

示例

addEventListener keydown 示例

这个例子展示了当你在<input>元素中按下一个按键时, KeyboardEvent.code 的取值 

<input placeholder="Click here, then press down a key." size="40">
<p id="log"></p>
const input = document.querySelector('input');
const log = document.getElementById('log');

input.addEventListener('keydown', logKey);

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

onkeydown 示例

input.onkeydown = logKey;

Specifications

Specification Status
UI Events Working Draft

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
keydown eventChrome Full support YesEdge Full support YesFirefox Full support YesIE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

See also