通过 KeyboardEvent.code 找出 KeyboardEvent.key

Question

KeyboardEvent 有 2 个属性：

如何在没有活动本身的情况下让 key 拥有 code？所以我在事件之外只有 code 值，想知道 key 与它相关联。

Answer 1

您可能想在 json 文件中存储代码的关联数组 -> 键？我没有看到其他解决方案

Answer 2

希望我答对了你的问题，如果是的话，我想你的问题在这里得到了解答：Get Character value from KeyCode in JavaScript... then trim

你要找的功能我觉得是这个：

String.fromCharCode(e.keyCode);

Answer 3

不可能从code可靠地猜测key，因为code指的是被按下的物理键，而key的值取决于在键盘布局上。例如，在我的德文 QWERTZ 键盘上，对应于 code 'BracketLeft' 的 key 是 'ü'，而在美式 QWERTY 键盘上则是 ']'。

如果您的目标是告诉您的用户按哪个键来触发某些操作，您可以尝试其他一些方法：

创建突出显示键的键盘图像并将其显示为提示
以某种方式让您的用户按下该键，以便您可以观察实际事件并以这种方式了解适当的 key 值
为您的用户最有可能使用的键盘布局创建 code -> key 映射，并根据浏览器区域设置猜测正确的映射 and/or 观察到的键盘事件

None 这些选项是完美的，但我认为可以让你非常接近。

Answer 4

我正在尝试做与您相同的事情，在 UI 中显示对应于 KeyboardEvent.code（物理键）的用户的当前键值。

简答：

目前不可能。最好使用 .

提出的建议之一

长答案：

像今天一样，在基于 Chrome 的浏览器中有一种非标准化的方式来获取它： KeyBoardLayoutMap。来自 MDN 的示例：

window.addEventListener("keydown", function (e) {   
   const keyboard = navigator.keyboard;   
   keyboard.getLayoutMap().then((keyboardLayoutMap) => {
      const keyValue = keyboardLayoutMap.get(e.code);
      console.log(`code: ${e.code}  <->  key: ${e.key}  <->  result: ${keyValue}`);  
   }); 
});

对于 keyboardLayoutMap.get() returns undefined 对于 alphanumeric section 中可打印字符之外的键，此代码将不可靠。我什至发现在 Chrome 中，v93 为我提供了欧洲西班牙语布局中键 < 和 º 的交换值。

我的另一个失败尝试是在用户可以执行任何操作之前调度 fake 键盘事件。问题是您必须手动填充事件对象中的每个属性（即：您必须事先知道代码和密钥）。

specification says absolutely nothing about how the two might relate to each other in a consistent way.

老实说，我不确定专业的网络应用程序是如何管理这类东西的，也许正如@seabeast 所说：一个有根据的猜测，将 window.navigator.language 中的语言环境连接到保存的代码->它的键映射最常见的 kb 布局？

结论：

如果前面的建议都不能让您满意，您可以随时尝试尽量减少对最终用户的混淆。我可能会：

坚持 event.key 属性。
让用户可以根据 his/her 需要重新绑定密钥。
并且尽量不要使用您的默认快捷方式集获得太多创意。只需在 alphanumeric section 中使用常见的 ASCII/English 字符，如果需要，也可以使用一些功能部分。

原因是用户通常可以link将您UI中的那些键值表示转换为物理键 在 his/her 键盘上，当失败时 he/she 可以重新绑定键。

通过 KeyboardEvent.code 找出 KeyboardEvent.key

Find out KeyboardEvent.key by KeyboardEvent.code

javascript

keycode

keyboard-events

简答：

长答案：

结论：