📅 最后修改于: 2023-12-03 15:31:14.776000 🧑 作者: Mango
在 HTML 和 DOM 中，我们可以使用键盘事件来响应用户在键盘上的按键动作，如按下、抬起、敲击等。除了常见的事件类型，如 keydown、keyup 和 keypress，还有一些与位置相关的属性可以让我们更好地捕捉和处理键盘事件。
首先，我们需要了解的是键码（keyCode）的概念。键码是键盘上每个按键所对应的数字编码。需要注意的是，不同的操作系统和浏览器对同一个按键的键码可能会有不同的映射关系，所以我们应该尽量避免直接使用具体的键码，而是使用按键的名称或枚举类型。
例如，我们可以使用 event.key 来获取正在按下的键的名称：
document.addEventListener("keydown", function(event) {
console.log(event.key); // 打印当前按下的键的名称
});
更具体地，如果我们需要与特定的按键进行比较，可以使用 event.code 属性来获取该按键的名称，例如："KeyA" 表示 A 键，"Enter" 表示回车键。这样，我们就可以写出类似这样的代码：
document.addEventListener("keydown", function(event) {
if (event.code === "KeyA") {
console.log("您按下了 A 键");
}
});
除了键码，另一个常用的键盘事件属性是键位（key）。键位描述了当前按下的键的实际字符，而不是编码。例如，按下字母键时，键位通常与按下的字母相同。
要获取键位，我们可以使用 event.key 或 event.code 属性的值。需要注意的是，对于某些非字符键（如 F1、Ctrl、Shift 等），它们的键位并不是一个实际的字符。在这种情况下，我们可以使用其他属性来识别它们，比如 event.ctrlKey、event.shiftKey、event.altKey 等。
document.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
console.log("您按下了 Enter 键");
}
if (event.key === "ArrowRight" && event.ctrlKey) {
console.log("您按下了 Ctrl + → 组合键");
}
});
除了键码和键位，键盘事件还提供了一些位置相关的属性，可以帮助我们区分不同的按键，例如：
event.location：表示当前按键所在的位置。常用的取值有：event.which：同 keyCode，为兼容旧版浏览器而存在。下面是一个演示示例，使用了虚拟键盘和不同的组合键来区分不同的位置和键位：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘事件位置属性演示</title>
</head>
<body>
<input type="text" id="input">
<script>
const input = document.querySelector("#input");
input.addEventListener("keydown", function(event) {
const keyName = event.key;
const keyLocation = event.location;
const keyCode = event.which || event.keyCode;
const isCtrl = event.ctrlKey;
const isShift = event.shiftKey;
const isAlt = event.altKey;
const keyInfo = `按键名称：${keyName}\n` +
`按键位置：${keyLocation}\n` +
`键码：${keyCode}\n` +
`Ctrl：${isCtrl}\n` +
`Shift：${isShift}\n` +
`Alt：${isAlt}\n`;
console.log(keyInfo);
});
</script>
</body>
</html>
通过观察控制台输出，我们可以看到按下各个键的位置、键位和其他属性的取值情况。
以上就是本文的全部内容，希望能够帮助你更好地了解和使用键盘事件。