本文详细解析JavaScript中keyup、keydown和keypress三种键盘事件的区别与触发时机，重点说明keypress在移动端及安卓系统的兼容性问题，推荐使用addEventListener。通过eve对象获取按键信息时，建议结合keyCode或which属性提升跨浏览器兼容性，并提供从Unicode码转换为字符的实用代码示例。
JavaScript键盘事件监听概述
在开发网页应用时，经常需要捕获用户的键盘输入行为，下面将介绍具体的实现方法。
键盘事件监听方式与类型对比
监听方式
键盘事件通常需要在整个文档层面进行全局监听，假设定义的监听函数名为keyboard()。
首先是keyup事件类型。该事件的触发条件是用户按下某个按键后将其松开。
//长按并松开只触发一次 document.addEventListener('keyup', keyboard); document.onkeyup = keyboard; //记得不要加括号！
其次是keydown事件类型。该事件的触发条件是用户按下某个按键的瞬间。
//长按可以触发多次 document.addEventListener('keydown', keyboard); document.onkeydown = keyboard;
最后是keypress事件类型。该事件的触发条件是用户按下按键且系统成功生成了对应的字符。
//长按可以触发多次 //遇到'1'，'a'，回车等按键可以触发，但del键，向上键等则不会 document.addEventListener('keypress', keyboard); document.onkeypress = keyboard;
需要特别注意：keypress事件的浏览器兼容性较差，例如在安卓系统上可能不支持，因此建议尽量避免使用。在onkey___系列属性和addEventListener方法之间，优先选择后者以确保更好的兼容性。
此外，如果keyboard函数不接收参数，那么监听到的将是任何符合触发条件的按键，即只要用户按下键盘上的任意键，事件就会被触发。
获取具体按键信息的方法
监听具体事件（即按了哪个键）
前文提到的keyboard函数可以定义形参，但在实际调用时不需要传入实参。
function keyboard(eve) { ... } document.onkeyup = keyboard; //不需要加参数和括号
此时，eve变量即为键盘事件类型的对象，它包含以下属性：
| 属性 | 意义 |
|---|---|
| key | 事件对应按钮的字符 |
| keyCode | 事件对应按钮的Unicode码 |
| which | 事件对应按钮的Unicode码 |
其中，不同浏览器对keyCode和which属性的支持情况存在差异，下文将介绍提升兼容性的具体方法。
举个例子：
<p id="msg1"></p>
<p id="msg2"></p>
<script>
function keyboard(eve) {
msg1.textContent += eve.key;
msg2.textContent += eve.keyCode || eve.which;
//该方法可以提升代码的兼容性
}
document.onkeyup = keyboard;
</script>input: a
output: a 65
兼容性处理与字符转换技巧
需要注意的是：key属性的兼容性并不理想，最佳实践是先获取Unicode码，再将其转换为对应的字符。
let x = eve.keyCode || eve.which; let key = String.fromCharCode(x);
如果想查询某个按键对应的Unicode码，可以查阅相关手册，或者在浏览器控制台中进行测试。对于简单场景，也可以参考ASCII码表（https://www.runoob.com/tags/html-ascii.html）作为替代方案。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。