编程语言
首页 > 编程语言> > 键盘事件是什么？

键盘事件是什么？

作者：互联网

在 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），其中包含很多有用的信息，如：

结论

键盘事件是用户输入交互的一个重要部分。通过监听这些事件，您可以实现丰富的交互功能，例如表单验证、快捷键、高亮显示等。

标签：
来源：