您正在阅读此内容的英文版本,因为该语系尚未翻译。 帮助我们翻译此文章吧!
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
keydown event | Chrome Full support Yes | Edge Full support Yes | Firefox Full support Yes | IE ? | Opera ? | Safari ? | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown