命令键的jQuery键代码答案

【问题标题】：jQuery key code for command key命令键的jQuery键代码
【发布时间】：2011-04-19 13:11:40
【问题描述】：

我已阅读jQuery Event Keypress: Which key was pressed? 和How can i check if key is pressed during click event with jquery?

但是我的问题是，您是否可以为所有浏览器获取相同的键事件？目前我知道 Firefox 为 command 按钮 (Mac) 提供代码 224，而 Chrome 和 Safari 为其提供值 91。是简单检查用户正在使用的浏览器并按下按键的最佳方法或者有没有办法让我可以在所有浏览器中获得 1 个关键代码？请注意，我通过以下方式获得价值：

var code = (evt.keyCode ? evt.keyCode : evt.which);

如果可能的话，我宁愿不使用插件，因为我只需要知道按下的 command/ctrl（Windows 系统）键。

【问题讨论】：

jQuery 规范化event.which 中的关键代码。你可以在api.jquery.com/keydown/#target 测试它。此外，浏览器嗅探几乎没有必要，而且几乎总是一种不好的做法。
即使 keydown 测试显示 Firefox 给命令键一个 224 而 Safari/Chrome 给它一个 91。
这更加困难，因为根据unixpapa.com/js/key.html，right 命令键的值是 93。
@Marcel：是的，我在我的 Mac 上得到了同样的结果。

标签： javascript jquery command keydown onkeyup

【解决方案1】：

jQuery 已经处理好了。要检查是否按下了控件，您应该使用：

$(window).keydown(function (e){
    if (e.ctrlKey) alert("control");
});

修饰键列表：

e.ctrlKey
e.altKey
e.shiftKey

正如 fudgey 建议的那样：

e.metaKey

Might work on MAC. Some other ways here as well.

【讨论】：

如果操作系统是 Mac，我希望它是命令键，如果是 Windows，我希望它是 ctrl，所以简单地使用 ctrlKey 是行不通的。
在 Windows 上，如果按下 Ctrl 键，jQuery 会将 e.metaKey 设置为 true，所以对于您想要的，只需 if (e.metaKey) {...} 就足够了。但是，我有相反的问题。我想将一个函数绑定到 Ctrl-X 但 not 到 Command-X。我找不到这样做的优雅方式（我的意思是，不检查用户代理）。
@Vess，如果您只想要Ctrl+X，请查看e.ctrlKey。如果您只想要Command+X 而不是Ctrl+X，请查看e.metaKey && !e.ctrlKey。
在 Windows 上按下 Control 键时，jQuery 不会设置 metaKey。所以你确实需要if (e.metaKey || e.ctrlKey) {...}

【解决方案2】：

如果您对按下 Command 键的确切时刻不感兴趣，只是在按下另一个键时是否按下，那么您可以使用事件的metaKey 属性.

否则，对于keydown 和keyup 事件，您需要的属性在所有浏览器中都是keyCode。不幸的是，Command 键在所有浏览器中的键码并不相同，并且左右 Command 在 WebKit 中具有不同的值（分别为 91 和 93）。如果没有某种浏览器嗅探，我看不到检测这些键的简单方法，但可能有一个。 which 属性肯定帮不了你。

如需了解更多信息，http://unixpapa.com/js/key.html 全面涵盖了所有主流浏览器中的关键事件处理。

【讨论】：

是的，但他使用的是jQuery的keydown，它将Event接口的which属性中的键码规范化。
@Jason：呵呵。我看到了另一个答案，一直在等待使用它的借口:)
+1 指向unixpapa.com/js/key.html 的链接，其中包含对问题的非常好的解释

【解决方案3】：

给你，在这个可运行的代码 sn-p 中试试这个：

$(window).on('keypress', function(event) {
  $("body").append($("<p>").text(
       "ctrlKey " + event.ctrlKey
    + "; altKey " + event.altKey
    + "; metaKey " + event.metaKey
    + "; shiftKey " + event.shiftKey
    + "; isCommandPressed " + isCommandPressed(event)
  ));
  
});

function isCommandPressed(event) {
  return event.metaKey && ! event.ctrlKey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Focus on this select control and try pressing keys:</p>

<p><select><option>Test</option></select></p>

【讨论】：