命令键的 jQuery 键码

IT技术 javascript jquery command keydown onkeyup
2021-02-28 22:10:19

我已经阅读了jQuery 事件按键:按下了哪个键?以及如何使用 jquery 检查在单击事件期间是否按下了键?

但是我的问题是您是否可以为所有浏览器获得相同的关键事件?目前我知道 Firefox 为command按钮 (Mac) 提供代码 224,而 Chrome 和 Safari 为其提供值 91。是简单地检查用户正在使用的浏览器并将按键基于该浏览器的最佳方法,还是有办法我可以在所有浏览器中获得 1 个关键代码吗?注意我得到的value是:

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

如果可能的话,我希望不使用插件,因为我只需要知道按下command/ ctrl(Windows 系统)键。

3个回答

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

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

修饰键列表:

e.ctrlKey
e.altKey
e.shiftKey

正如软糖所建议的那样:

e.metaKey

可能适用于 MAC。这里还有一些其他方式

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

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

否则,对于keydownkeyup事件,您需要的属性keyCode在所有浏览器中。不幸的是,Commandkey 在所有浏览器中的键码并不相同,并且Command在 WebKit 中left 和 right的值不同(分别为 91 和 93)。如果没有某种浏览器嗅探,我看不到检测这些键的简单方法,但可能有一个。which物业肯定不会帮你的。

有关更多信息,http://unixpapa.com/js/key.html全面介绍了所有主要浏览器中的关键事件处理。

没错,但他使用的是 jQuery 的keydown,它规范which了 Event 接口属性中的关键代码
2021-04-20 22:10:19
+1 指向unixpapa.com/js/key.html的链接,其中包含对问题的非常好的解释
2021-04-26 22:10:19
@杰森:呵呵。我看到了另一个答案,一直在等待使用它的借口:)
2021-05-03 22:10:19

给你,在这个可运行的代码片段中尝试这个:

$(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>