从 KeyCode 中获取字符值的 JavaScript 技巧

在编写前端代码时，经常需要处理键盘事件。当用户敲击键盘时，JavaScript 可以通过监听 keydown 或 keyup 事件来获取按下或释放的键的信息。事件对象提供了一个 keyCode 属性，它表示被按下或释放的键的键码。

但是，keyCode 并不是一个直接可读取字符值的属性。在本文中，我们将探讨如何使用 JavaScript 获取 keyCode 对应的字符值。

方法一：使用 String.fromCharCode()

最简单的方法是使用 String.fromCharCode() 方法。该方法接受一个或多个 Unicode 编码，并返回由这些编码表示的字符。

例如，要获取 keyCode 为 65（即大写字母 A）的字符值，可以使用以下代码：

document.addEventListener('keydown', function(event) {
  const char = String.fromCharCode(event.keyCode);
  console.log(char); // 输出 "A"
});

然而，这种方法有一个问题：它只适用于 ASCII 码。对于非 ASCII 码的字符，必须使用其他方法。

方法二：使用 KeyboardEvent.key

如果你需要支持非 ASCII 码的字符，可以使用 KeyboardEvent 对象的 key 属性。key 属性返回一个字符串，表示用户按下或释放的键所代表的字符。

例如，要获取任意字符的字符值，可以使用以下代码：

document.addEventListener('keydown', function(event) {
  const char = event.key;
  console.log(char); // 输出按下的字符
});

然而，需要注意的是，key 属性并非所有浏览器都支持。在不支持该属性的浏览器中，可以使用 keyCode 属性结合表格来获取字符值。

方法三：使用键码表

最后一种方法是使用键码表。每个键都有一个唯一的键码，可以使用键码表将 keyCode 转换为相应的字符。

下面是一张常用键码表：

例如，要获取 keyCode 为 65 的字符值，可以使用以下代码：

document.addEventListener('keydown', function(event) {
  const keyCode = event.keyCode;
  const char = String.fromCharCode(keyCodeMap[keyCode]);
  console.log(char); // 输出 "A"
});

需要注意的是，键码表可能因浏览器而异，因此应选择适合您的目标受众的键码表。

结论

本文介绍了三种方法来从 keyCode 中获取字符值。如果您只需要处理 ASCII 码，可以使用第一种方法；如果需要支持非 ASCII 码的字符，则可以使用第二种方法；如果两种方法均不可用，则可以使用第三种方法。

以上这些技巧可以让您更轻松地编写前端代码，并避免常见的错误。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9967