在JavaScript中，通过键名（也就是键盘上每个按键的名称）获取对应的键码（keyCode）是一个重要且实用的功能。这对于开发需要依赖于键盘输入的Web应用尤其重要。核心观点包括：使用KeyboardEvent的key属性进行判断、使用字典映射键名到keyCode、利用现代浏览器的code属性。其中，最为推荐的方法是利用现代浏览器的code属性，这个属性为每个键分配了一个独特的字符串值（不依赖于输入法或者键盘布局），因此能更准确地识别按键。
现代浏览器提供的code属性在处理键盘事件时，提供了一个对于开发者更友好、更准确的按键识别方式。与keyCode不同，code属性代表了物理键盘上的位置，而不是按键的字符编码，这意味着无论用户的键盘布局如何更改，每个键的code属性值都保持不变。例如，无论在哪种键盘布局下，“W”键始终被表示为KeyW。这种方式让开发者可以不必担心用户的键盘布局和输入法，就可以准确地识别用户按下的是哪个键。
一、使用 KEYBOARDEVENT 的 KEY 属性
KeyboardEvent事件对象的key属性可以直接提供按键的名称。当用户按下一个键时，会触发一个键盘事件，我们可以通过监听这个事件并检查事件对象的key属性来确定用户按下了哪个键。这个方法的好处是直接、简单，易于理解和实现。
例如，可以这样用JavaScript来监听键盘事件，并获取用户按下键的名称：
document.addEventListener('keydown', function(event) {
console.log(event.key); // 打印出按键的名称
});
这种方法简单且易于实现，但它依赖于key属性，而不是keyCode。对于需要兼容旧版本浏览器的情况，使用keyCode可能更为稳妥。
二、使用字典映射键名到KEYCODE
由于键名和keyCode之间没有直接的API调用来转换，我们可以创建一个字典，手动将每个键名映射到其对应的keyCode值。这种方法虽然需要一定的初始化工作，但它允许你在任何需要的时候快速通过键名来查找keyCode。
const keyMap = {
"ArrowUp": 38,
"ArrowDown": 40,
"ArrowLeft": 37,
"ArrowRight": 39,
// 更多键名和keyCode的映射
};
document.addEventListener('keydown', function(event) {
if (keyMap[event.key]) {
console.log(keyMap[event.key]); // 通过键名获取keyCode并打印
}
});
这种方法的缺点是需要手动维护一个键名到keyCode的映射表，但它在keyCode仍然是必需的情况下非常有效。
三、利用现代浏览器的 CODE 属性
正如开头段落提到的，code属性为键分配了独特的字符串值，它提供了一种更为标准化和精确的方法来识别键盘上的按键。这意味着无论用户的输入法或键盘布局如何，code属性都能准确地返回一个按键的标识码。
document.addEventListener('keydown', function(event) {
console.log(event.code); // 打印出物理按键的代码
});
利用code属性，开发者可以更加便捷和准确地实现按键识别，特别是在开发游戏或需要精准按键控制的web应用时。结合event.key和event.code的使用，可以有效地覆盖大多数按键识别的需求。
四、结合现代 API 和兼容性考虑
虽然code属性提供了一种现代且准确的方法来获取键盘上的按键，但仍有必要结合keyCode来确保应用具有更好的兼容性。对于那些还需要支持旧浏览器的开发者来说，结合使用keyCode和code属性，以及可能的key属性，将是一个更为全面且健壮的解决方案。
在实际应用中，可以首先检查浏览器是否支持code属性，如果不支持，则退回到使用keyCode或key属性。这种方式能够确保在绝大多数浏览器中都能准确且可靠地处理键盘事件。
document.addEventListener('keydown', function(event) {
let keyValue;
if (event.code) {
keyValue = event.code;
} else if (event.keyCode) {
keyValue = event.keyCode;
} else {
keyValue = event.key;
}
console.log(keyValue); // 根据浏览器的兼容性使用不同的属性
});
通过这种方式，开发者可以根据自己的需求和目标用户群体的浏览器使用习惯，选取最合适的方法来实现通过键名获取键码的功能。这在创建快捷操作、游戏控制以及需要精确键位识别的复杂web应用时尤其有用。
相关问答FAQs：
-
如何用 JavaScript 获取键盘按键的 keyCode？
要通过键名获取键盘的 keyCode，您可以使用 JavaScript 中的事件监听器。例如，使用键盘事件的keypress、keydown或keyup，在事件处理函数中通过event.keyCode属性获取按下键盘的 keyCode 值。然后，您可以将 keyCode 值与键名对应起来，以实现功能、进行条件判断或其他操作。 -
如何在 JavaScript 中通过键名获取键盘按键的 keyCode 并执行相应的操作？
如果您想根据键名执行相应的操作，可以使用 JavaScript 的条件语句和键盘事件。在事件处理函数中，获取按下键盘的 keyCode 值后，您可以使用if、switch或其他条件语句来判断所按下的键名是什么，然后执行相应的操作。例如，按下键盘上的箭头键时，您可以改变一个元素的位置、切换图片等等。 -
有没有现成的 JavaScript 函数可以通过键名获取键盘的 keyCode 值？
目前，JavaScript 并没有原生的函数来直接通过键名获取键盘的 keyCode 值。但是您可以自己实现一个函数来完成这个功能。需要用到 JavaScript 的事件监听器、条件语句以及键盘事件。在事件处理函数中，通过键名与 keyCode 对应关系的方式，将键名转换为相应的 keyCode 值。然后，您就可以在其他需要使用 keyCode 值的地方使用这个自定义的函数了。
