跨浏览器跨操作系统的方式获得keyCode/字符按下keydown事件

Cross-Browser Cross-OS way to get keyCode/character pressed onkeydown event

本文关键字：字符 事件 keydown keyCode 浏览器 操作系统 方式获      更新时间：2023-09-26

例如:

<input type='text' onkeydown='doSomething()' />
<script>
  function doSomething() {
    // ?
  }
</script>

我需要得到keyCode/字符按在跨浏览器/操作系统的方式。怎么做呢?我已经尝试过这个~6年前，因为我记得那个时候，这并不容易，有时我必须通过事件或其他东西来让它在opera或IE上工作cmiw

你很接近，但你的代码的问题是你正在执行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;博士:尝试使用这个)

根据MDN KeyboardEvent.key文档，如果您正在寻找未弃用的，"未来"的方式，event.key是推荐的方式。文档正在进行大量修改，因此MDN上的细节很少。

查看caniuse.com对event.key的支持表，在IE11以下或Safari上根本没有支持(截至2017年1月)。这可能已经是一个交易破坏者，所以让我们继续寻找。

event.keyCode

我一直使用event.keyCode, MDN说现在已弃用，并带有此警告:

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

好吧，足够公平-浏览器之间有足够的差异和keydown和keypress事件之间的细微差异(不是同一件事!)，使这个不值得再使用了。愿keyCode安息，这是真的!

event.which

From MDN docs:

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

在弃用过程中的另一个-"此功能已从Web标准中删除。尽管一些浏览器可能仍然支持它，但它正在被放弃。"

好的，我们已经知道keyCode也被弃用了，那么charCode是关于什么的呢?

event.charCode

返回keypress事件的Unicode字符代码…然后我们从MDN得到另一个警告:

不要再使用这个属性了，它已经被弃用了。用KeyboardEvent.key代替。

在这里开始追逐我们自己的尾巴，KeyboardEvent.key是未来的方法，但尚未得到充分支持…对于keydown事件，它也始终返回0，您必须侦听keypress事件，这样才有价值。

event.code

最后一个选项似乎很有希望…event.code docs from MDN:

表示键盘上的物理键(与按下该键生成的字符相反)。换句话说，该属性返回的值不会因键盘布局或修饰键的状态而改变。

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

的问题是:还没有很好的支持。在IE, iOS, Safari, Android或Opera上没有。

<标题>所以…我应该用什么?我不认为有一个放之四海而皆准的解决方案。当前的场景似乎需要一定程度的填充，或者至少支持旧的event.keyCode和event.which属性，作为event.key和event.code不能使用的后备。

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

转变Windows/Etc/Ctrl/命令/

如果您关心与原始键组合按下的其他键，则需要检查一些额外的属性:

  • event.altKey
  • event.ctrlKey
  • event.metaKey
  • event.shiftKey

方便工具:keycode.info

一个非常有价值的工具，可以快速找出你需要写逻辑的keyCode是http://keycode.info/(由v. cool Wes Bos创建)

…我6年前就试过了……

在现代…

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

编辑:工作在"现代"浏览器，IE9+和其他船员。

相关文章：