js键盘事件 keycode

基础概念

keyCode 是一个历史悠久的 JavaScript 事件属性，用于表示键盘上每个键的唯一标识符。它是一个数字值，通常与特定的键对应。例如，按下字母 "A" 键时，keyCode 的值通常是 65。

相关优势

1. 兼容性：keyCode 在旧版浏览器中广泛支持，因此在需要兼容旧版浏览器的场景中仍然有用。
2. 简单直接：它的值是固定的，便于记忆和使用。

类型与应用场景

类型

• 字母键：如 "A" 对应 65，"B" 对应 66 等。
• 数字键：0-9 分别对应 48-57。
• 功能键：如 F1 对应 112，F2 对应 113 等。
• 控制键：如 Enter 对应 13，Space 对应 32 等。

应用场景

• 表单验证：通过监听键盘事件，实时检查用户输入是否符合要求。
• 快捷键实现：为用户提供便捷的操作方式，如 Ctrl+S 保存文档。
• 游戏开发：在游戏中响应用户的键盘操作，实现角色移动或其他功能。

遇到的问题及解决方法

问题：keyCode 已被废弃

现代浏览器推荐使用 key 属性替代 keyCode，因为 keyCode 已被标记为废弃。

原因

• 兼容性问题：不同浏览器对 keyCode 的支持可能有所不同。
• 可读性差：keyCode 的值不易理解，需要查阅文档才能知道每个值对应的键。

解决方法

使用 key 属性，它提供了更直观和易读的字符串表示键的值。

示例代码

document.addEventListener('keydown', function(event) {
    console.log('Key pressed:', event.key);
    // 根据 event.key 进行相应的处理
    if (event.key === 'Enter') {
        console.log('Enter key was pressed!');
    }
});

总结

虽然 keyCode 在过去被广泛使用，但由于其可读性和兼容性问题，现代开发中更推荐使用 key 属性。通过监听键盘事件并使用 event.key，可以更清晰地理解和处理用户的键盘输入。

参考链接

• MDN Web Docs: KeyboardEvent.key
• MDN Web Docs: KeyboardEvent.keyCode