跨浏览器Cross-OS方式获取keyCode /字符按下onkeydown事件

时间：2013-02-27 09:37:58

标签： javascript dom

例如，如果我有这个：

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

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

我需要以跨浏览器/ os方式按下keyCode /字符..如何做到这一点？我已经尝试过这个〜6年前了，因为我记得那个时候，这并不容易，有时我必须通过事件或其他什么才能让它在Opera或IE cmiiw上运行

2 个答案:

答案 0 :(得分：18)

您已接近，但您的代码问题在于您正在执行doSomething()以响应keyDown个事件......让我们仔细观察 - 您正在执行doSomething < em>没有在中传递任何参数。你也没有命名/接受参数，即使你确实通过了它们。

对您的代码进行一些快速调整，您就完成了所有工作：

// 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.key Documentation，如果您正在寻找未弃用的“未来前进”方式，则event.key是推荐的方式。虽然文档正在进行大量修改，但MDN上的细节很少。

查看event.key的{​​{3}}，IE11或Safari下面都没有支持（截至2017年1月）。这可能已经是一个交易破坏者，所以让我们继续寻找。

event.keyCode

我一直使用event.keyCode caniuse.com support table并附带此警告：

  

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

好吧，公平 - 浏览器之间存在足够的差异以及keydown和keypress事件（MDN says is now deprecated）之间的微妙差异，以使其不再值得使用。 RIP keyCode，它是真实的！

event.which

来自not the same thing!：

  

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

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

好的，我们已经知道的keyCode也已弃用，那么charCode是什么？

event.charCode

这将返回keypress事件...和MDN docs：

的Unicode字符代码
  

不再使用此属性，不推荐使用此属性。请改用KeyboardEvent.key。

开始在这里追逐我们自己的尾巴，KeyboardEvent.key是未来前进的方法，但尚未得到足够的支持......它还会0事件一直返回keydown，你必须听keypress事件才有价值。

event.code

最后一个选项看起来很有希望...... we get another warning from MDN：

  

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

这很方便，因为我们得到ShiftRight与ShiftLeft之类的内容，对游戏开发和非常具体的互动非常有用。所有代码选项的文档底部都有一个很棒的图表。

捕获：event.code docs from MDN。 IE，iOS Safari，Android或Opera都没有。

那么......我该怎么用？

TBH我认为没有一个适合所有人的解决方案。目前的格局似乎需要一定程度的填充，或至少支持旧event.keyCode和event.which属性作为无法使用event.key和event.code的后备。

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

移位/ Ctrl键/命令/窗/等

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

便利工具：keycode.info

一个非常宝贵的工具，用于快速确定编写逻辑所需的keyCode event.shiftKey（由v。酷http://keycode.info/创建）

答案 1 :(得分：11)

  

......大约6年前我试过这个......

在现代...... 

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

编辑：适用于“现代”浏览器，IE9 +和其他工作人员。

相关问题
最新问题