我应该使用哪些替代KeyboardEvent.which和KeyboardEvent.keyCode被弃用的方法？

Question

作为现代化/优化计划的一部分，我正在尝试从现有代码库中剥离jQuery。在文本输入框中，当用户按下“enter”键时，需要执行一些操作。以前，我们是通过以下方式实现的：

$("#loginInput").on("keypress", e => {
   if (e.which == 13) {
     // if key pressed was enter...
     login();
   }
});

然而，仔细阅读键盘事件API 此处 我发现大多数常用的API都已被弃用，如KeyboardEvent.which和KeyboardEvent.keyCode。

即使这些属性在大多数浏览器中仍可用，但我感到使用弃用的API不太舒适。我应该使用什么替代品？

- db2

---

这个清楚吗？“警告：此属性已被弃用；如果可用，应使用KeyboardEvent.key代替。” - str

@str 是的，在那个时候还不太清楚。由于某种原因，我的大脑没有将获取KeyboarEvent.key的结果与使用实际值相连接，而是依赖于先前的KeyboardEvent.which或KeyboardEvent.keyCode。在看了这么长时间的e.which之后，我期望得到一个数字结果。对你来说很明显的事情可能对其他人来说并不明显。 - db2

Answer 1

我认为你想要使用event.key，这似乎有广泛的支持。

"key"属性给出了用户与键盘交互反映的字符，考虑到所有涉及的元按键（shift、ctrl等）。

所以要检查回车字符（13），你需要使用：

if (event.key === "Enter") {
  // enter key was pressed
}

编辑更新以反映这样一个令人惊讶的事实，即当该键触发事件时，“key”属性被设置为字符串“Enter”。

- Pointy

---

我认为你需要检查 "Enter" 而不是 "\n"，根据 MDN。我试图在你的帖子中添加一个编辑，但我认为它被覆盖了。 - Dehodson

@Pointy，感谢您的回答，但没必要那么咄咄逼人。如果这很简单，我也不会问了。 - db2

@db2？我并不是想要挖苦你，对于冒犯你我深感抱歉。我不确定你的意思。 - Pointy

event.key && event.key === "Enter" 是多余的。如果 event.key 是 "Enter"，那么它显然是真值。我认为你想写的是 if (event && (event.key === "Enter"))。 - Lajos Arpad

@LajosArpad 非常好的观点；当我错误地认为 event.key 是 Unicode 字符而不是描述性字符串时，代码最初是不同的。有一个调用 .charCodeAt()。 - Pointy

@Pointy 在编辑后，没有任何理由不给这个答案点赞了。 - Lajos Arpad