JavaScript 键盘事件 - JavaScript 编程网

JavaScript 键盘事件允许网页监听和响应用户的键盘操作。这些事件在处理游戏控制、表单验证、快捷键功能等场景中非常有用。以下是几个常用的键盘事件及相关概念：

keydown：当用户按下键盘上的任意键时触发。如果用户持续按住该键，此事件会重复触发。
keyup：当用户释放键盘上的键时触发。每个键的释放都会单独触发一个keyup事件。
keypress：当用户按下并释放键盘上的字符键（注意：不包括功能键、Shift、Ctrl、Alt等）时触发。此事件已不被推荐使用，因为它在某些浏览器中表现不一致，并且已被大多数现代浏览器废弃。

使用示例

以下是一个简单的示例，展示了如何使用keydown事件来监听键盘输入并根据输入的键执行操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件示例</title>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.addEventListener('keydown', function(event) {
                // 获取按键的键码
                var keyCode = event.keyCode;
                console.log("按下的键码是: " + keyCode);
                
                // 检查是否为"A"键（小写，键码65）
                if (keyCode === 65) {
                    alert("你按下了'A'键！");
                }
            });
        });
    </script>
</head>
<body>
    <h1>请在页面上按下任意键...</h1>
</body>
</html>

事件对象属性

在键盘事件处理函数中，event对象提供了一些有用的属性来获取更多关于按键的信息：

keyCode 或 which（已废弃，建议使用 key）：表示按下的物理按键的键码。
key：表示按下的键的字符串表示，例如 'a', 'Enter'，更准确且跨浏览器兼容性更好。
shiftKey, ctrlKey, altKey, metaKey：布尔值，分别表示 Shift、Ctrl、Alt 和 Meta（在Mac上通常是Command键）是否被按下。
repeat：布尔值，表示用户是否重复按下了同一个键（即键被持续按下）。

注意事项

跨浏览器兼容性：不同的浏览器在处理键盘事件时可能存在差异，尤其是在keyCode的使用上。因此，推荐使用key属性来识别按键。
避免对特定键码的依赖，以提高可访问性和兼容性。
考虑使用event.preventDefault()来阻止键盘事件的默认行为，比如阻止按下F5刷新页面。

通过合理利用键盘事件，开发者可以创建更加动态和交互式的Web应用体验。

JavaScript 按键码

提供一个完整的JavaScript按键码列表可能不太实际，因为它们数量众多且根据不同键盘布局可能有所不同。但是，我可以给你一些常见的按键码示例以及如何自动生成按键码信息的方法。

常见按键码示例

这里列出了一些常见的按键及其对应的键盘码（keyCode）或键值（key）：

65: 字母 "A"
66: 字母 "B"
97: 小写字母 "a"（在keydown/keyup事件中通常与65相同，但在keypress事件中有区别）
13: 回车键 (Enter)
27: Esc键
32: 空格键
37: 左箭头键
38: 上箭头键
39: 右箭头键
40: 下箭头键
46: 删除键 (Delete)
112-123: F1-F12功能键

动态获取按键码

如果你想获取特定键盘按键的详细信息，可以通过编写一段简单的JavaScript代码来实时打印出按下的键的详细信息，包括键码（keyCode，尽管已不推荐使用）、键值（key）等。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按键信息查看器</title>
    <style>
        body { font-family: Arial, sans-serif; }
    </style>
</head>
<body>
    <h2>按任意键查看按键信息：</h2>
    <div id="output"></div>

    <script>
        document.addEventListener('keydown', function(event) {
            // 阻止页面默认行为，如滚动等
            event.preventDefault();

            let output = document.getElementById('output');
            output.innerHTML += `
                <p><strong>按键:</strong> ${event.key}</p>
                <p><strong>键码 (keyCode):</strong> ${event.keyCode} <em>(此属性已废弃，推荐使用 'key')</em></p>
                <p><strong>编码 (charCode):</strong> ${event.charCode} <em>(在keypress事件中使用)</em></p>
                <p><strong>重复按压？(repeat):</strong> ${event.repeat}</p>
                <hr>
            `;
        });
    </script>
</body>
</html>

这段代码会在网页上显示每次按键的详细信息，包括按键名称、键码（尽管不推荐使用但仍显示以供参考）、字符编码以及是否为重复按键。通过运行这样的脚本，你可以动态地探索不同键盘布局和不同按键所对应的键码。

声明：本站所有文章和图片，如无特殊说明，均为原创发布。商业转载请联系作者获得授权，非商业转载请注明出处。

真诚赞赏，手留余香

赞赏