标签：
在 JavaScript 中，您可以通过监听键盘事件来捕捉用户按下的键。常见的键盘事件包括 keydown、keyup 和 keypress。以下是这些事件的详细说明和示例。
1. keydown 事件
keydown 事件在用户按下键盘上的某个键时触发。无论键是否被实际按下，都会触发该事件。
document.addEventListener('keydown', function(event) {
console.log('按下的键的代码:', event.code); // 获取按下的键的代码
console.log('按下的键的字符:', event.key); // 获取按下的键的字符
});
JavaScript
2. keyup 事件
keyup 事件在用户松开键盘上的某个键时触发。这常用来执行某些操作，如提交表单或移除高亮等。
document.addEventListener('keyup', function(event) {
console.log('释放的键的代码:', event.code);
console.log('释放的键的字符:', event.key);
});
JavaScript
3. keypress 事件
keypress 事件在用户按下一个可打印的键时触发。请注意，keypress 在现代浏览器中逐渐被弃用，建议使用 keydown 和 keyup。
document.addEventListener('keypress', function(event) {
console.log('按下的字符:', event.charCode); // 获取按下的字符代码
console.log('按下的键:', event.key);
});
JavaScript
示例代码
下面是一个简单的示例，展示如何捕捉按键事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘事件示例</title>
</head>
<body>
<h1>请按下键盘上的任意键</h1>
<p id="output"></p>
<script>
const output = document.getElementById('output');
document.addEventListener('keydown', function(event) {
// 显示按下的键
output.textContent = '按下的键: ' + event.key; // 打印字符
});
document.addEventListener('keyup', function(event) {
// 显示释放的键
output.textContent += '\n释放的键: ' + event.key; // 打印字符
});
</script>
</body>
</html>
HTML
事件对象
在处理键盘事件时，您可以访问事件对象（如上面的例子中的 event），其中包含很多有用的信息，如：
event.key：被按下的键的字符（如 'a'、'Enter'）。event.code：键的物理键码（如 'KeyA'、'Enter'）。event.altKey、event.ctrlKey、event.shiftKey：如果在触发事件时按下了相应的修饰键，这些属性的值为true。
结论
键盘事件是用户输入交互的一个重要部分。通过监听这些事件，您可以实现丰富的交互功能，例如表单验证、快捷键、高亮显示等。
标签： 来源：
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。