跨浏览器协调 keyCode/charCode 的首选方法是什么？答案

【问题标题】：What preferred way to reconcile keyCode/charCode across browsers?跨浏览器协调 keyCode/charCode 的首选方法是什么？
【发布时间】：2010-05-26 22:09:06
【问题描述】：

根据 keydown 事件的属性，我想确定当前的 charCode 是什么？

例子。

对于按下 NumPad0、D0 和冒号键时的 keydown 事件，我想知道关联的字符代码是什么。目前我有一个包含与该 keyCode 关联的字符码的地图，或者如果未指定 charCode 则使用当前的。

keyCode = {
  Colon: 186,
  D0: 48,
  NumPad0: 96,
};
charCodes = {
  186: 59,
  96: 48,
};
shiftCharCodes = {
  186: 58,
  48: 41
};

在某些情况下，不同浏览器的 keyCode 也不同？

例子。

keydown 事件在浏览器中具有不同的 keyCode 值。冒号键 (:/;) - 火狐上的 keyCode 是 59 - IE/safari 上的 keyCode 为 186

更多信息

http://www.quirksmode.org/js/keys.html

【问题讨论】：

我不知道它是否与您的项目有关，但如果它是用于游戏并且您使用例如 WASD 键，请认为我会在我的法语 AZERTY 键盘上使用 ZQSD，即德国人使用 QWERTZ 等而且我必须按主键盘上的数字的 shift 键（当 qwerty 有 1/sth 键时，第一个是 &/1 键）。 Web 应用程序应该是安全的，就像上/左/下/右键一样。

标签： javascript keycode

【解决方案1】：

如果您对与按键相关的字符代码感兴趣，那么keydown 事件将一事无成。 keypress 事件是此信息可用的唯一位置，并且对于大多数可打印的键来说并没有太大问题。

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    alert("Character: " + String.fromCharCode(charCode));
};

围绕“特殊”不可打印按键（例如功能键）的浏览器行为存在差异。有关更多信息，我认为 this article by Jan Wolter 是 JavaScript 密钥处理的权威参考。

【讨论】：

我也花了很多时间参考 Jan 关于当前 js 密钥处理状态的论文。并得出与他相同的结论：这是一场噩梦。这就是重点突出、精心设计的 JavaScript 抽象大放异彩的地方。
创建一个完整的抽象来完全处理棘手的问题，例如防止默认行为和处理自动重复的关键事件，这是一项复杂且可能是不可能的工作。我倾向于只为当前任务编写尽可能多的抽象。
使用keypress的另一个原因是击键和字符之间不一定是一一对应的。一些输入法具有复杂的交互，包括删除以前的字符（通常通过合成退格）和插入新的字符，并且不假设任何给定击键产生的字符的知识会更安全。对于非欧洲语言尤其如此。

【解决方案2】：

虽然我通常不喜欢我即将给出的答案，但我觉得它是合适的：

这是 jQuery、Prototype、Dojo 或 MooTools 等库的完美用例。

你不想让自己负担这项工作，它已经完成了。

【讨论】：

不是真的 - jQuery 对于一个人来说并不真正关心识别键。
@Tim - 好的，让我具体说明一下 - 所以热键插件是 exquisite。 code.google.com/p/js-hotkeys
我几乎觉得我们需要一个简写来表示厌恶但合适的案例。 stackoverflow.com/questions/423823/…
代码诗人：热键插件看起来很适合识别键。一旦您处理了诸如防止默认行为和浏览器因重复按键而触发的不同事件之类的事情，您将需要更大的抽象。