11

例如，如果我有这个： 

<input type='text' onkeydown='doSomething()' />

<script>
  function doSomething() {
    // ?
  }
</script>

我需要以跨浏览器/操作系统的方式按下 keyCode/character.. 怎么做？我在 6 年前尝试过这个，我记得那个时候，这并不容易，有时我必须通过事件或其他东西才能让它在歌剧或 IE cmiiw 上工作

4

2 回答 2

25

你很接近，但你的代码的问题是你正在执行doSomething()以响应keyDown事件......让我们仔细看看 - 你在执行时doSomething 没有在. 即使您确实通过了参数，您也没有命名/接受参数。

对您的代码进行一些快速调整，一切就绪：

// Notice an `event` argument, containing the important data
function doSomething(event) {
  console.log('****** doSomething');
  console.log('event.keyCode: ', event.keyCode);
  console.log('event.which: ', event.which);
  console.log('event.key: ', event.key);
  console.log('event.code: ', event.code);
}
<!-- Notice: We pass the key `event` object into doSomething -->
<input type='text' onkeydown='doSomething(event)' placeholder="Type here..." />

如何确定按下了什么键

我对此也感到困惑，但让我们回顾一下这些选项。为 1995 年的浏览器差异做好准备！

首先，请记住，虽然最终目标可能是确定按下了哪个键，但不同的方法需要不同的步骤才能实现。事件可以是“系统和实现相关的数字代码”、Unicode 字符值、Ascii 值或实际键名（“ArrowUp”）。

event.key（TL;DR：尝试使用这个）

根据MDN KeyboardEvent.keyDocumentation，event.key如果您正在寻找不被弃用的“未来”方式，这是推荐的方式。文档正在大量修改中，因此 MDN 上的细节很少。

查看caniuse.com 支持表，event.keyIE11 以下或 Safari 上根本不支持（截至 2017 年 1 月）。这可能已经是一个交易破坏者，所以让我们继续寻找。

event.keyCode

我一直使用event.keyCode，MDN 说它现在已被弃用，并带有以下警告：

如果可能，您应该避免使用它；它已经被弃用了一段时间。相反，您应该使用KeyboardEvent.code，如果它已实施。不幸的是，有些浏览器仍然没有它，因此您必须小心确保使用所有目标浏览器都支持的浏览器。谷歌 Chrome和Safari已经实现KeyboardEvent.keyIdentifier了，这是在规范草案中定义的，但不是最终规范。

keydown好吧，很公平——浏览器和keypress事件之间有足够的差异（不是同一件事！），这使得它不再值得使用。RIP keyCode，这是真的！

event.which

来自MDN 文档：

按下的特定键的数字代码，具体取决于按下的是字母数字键还是非字母数字键。有关详细信息，请参阅 KeyboardEvent.charCode** 和KeyboardEvent.keyCode 。

另一个正在弃用的——“这个特性已经从 Web 标准中删除。虽然一些浏览器可能仍然支持它，但它正在被删除。”

好的，keyCode我们已经知道它也被弃用了，那是怎么回事charCode？

event.charCode

这将返回keypress事件的 Unicode 字符代码......我们从 MDN 收到另一个警告：

不再使用此属性，它已被弃用。改为使用KeyboardEvent.key。

在这里开始追逐我们自己的尾巴，KeyboardEvent.key是一种面向未来的方法，但还没有得到充分的支持......它也0一直返回keydown事件，你必须倾听keypress事件才能使其有价值。

event.code

最后一个选项似乎很有希望......event.code来自 MDN 的文档：

表示键盘上的物理键（与按键生成的字符相反）。换句话说，这个属性返回一个不会被键盘布局或修饰键状态改变的值。

这很方便，因为我们得到了类似ShiftRightvs的东西ShiftLeft，这对于游戏开发和非常具体的交互很有用。所有代码选项的文档底部都有一个很棒的图表。

问题：还不是很好的支持。IE、iOS Safari、Android 或 Opera 上没有任何内容。

那么......我应该使用什么？

TBH 我认为没有一刀切的解决方案。当前的情况似乎需要某种程度的 polyfill，或者至少支持旧的event.keyCode和event.which属性作为后备，用于在哪里使用event.key和event.code不能使用。

对于生产项目，我们只需要考虑浏览器和设备支持要求，然后从那里开始。

Shift/Ctrl/Command/Windows/等

有一些额外的属性可以检查您是否关心与原始键组合按下的其他键：

方便的工具：keycode.info

http://keycode.info/（由v.cool Wes Bos创建）是一个非常宝贵的工具，可以快速找出您需要围绕哪些 keyCode 编写逻辑

于 2017-01-15T00:24:54.437 回答
11

...我已经尝试过这个〜6年前...

在现代...

document.querySelector('input').addEventListener(function(e) {
  var key = e.keyCode || e.which;
  ...
});

编辑：在“现代”浏览器、IE9+ 和其他工作人员中工作。

于 2013-02-27T09:40:18.810 回答