如何通过 JavaScript 捕获 Mac 的命令键?

IT技术 javascript dom-events
2021-02-04 16:15:58

如何Cmd通过 JavaScript获取 Mac 的密钥?

6个回答

编辑:截至2019年,e.metaKey支持所有主流浏览器按照该MDN

请注意,在 Windows 上,虽然⊞ Windows键被认为是“元”键,但浏览器不会捕获它。

这仅适用于 MacOS/键盘上的命令键。


不同于Shift/ Alt/Ctrl时,Cmd(“苹果”)键不被认为是修饰键,相反,你应该听上keydown/keyup当按下一个键,然后郁闷基于和记录event.keyCode

不幸的是,这些关键代码取决于浏览器:

  • 火狐: 224
  • 歌剧: 17
  • WebKit 浏览器(Safari/Chrome):(91左命令)或93(右命令)

您可能有兴趣阅读JavaScript Madness: Keyboard Events 一文,我从中学到了这些知识。

要知道 Opera 现在也属于 Webkit 类别。我认为只听 91、93 和 224 就可以完成工作。顺便说一下,17 是 Ctrl。老 Opera 没有区分 Cmd 和 Ctrl 吗??
2021-03-14 16:15:58
回应@nachocab 的评论: e.key === 'Meta' 适用于 keydown 和 keyup。所以这可以用来代替 e.metaKey
2021-03-20 16:15:58
为了回应 Miroslav 的评论,请注意它仅适用于keydown事件,而不适用于keyup.
2021-03-26 16:15:58
似乎 event.metaKey 在当前版本的 Safari、Firefox 和 Chrome 中工作得很好。IMO 这是非常明确的解决方案。
2021-04-09 16:15:58

event.metaKey如果您正在处理keydown事件,还可以查看事件属性非常适合我!你可以在这里试试

我认为诀窍(即使在 Chrome 中)是这适用于keydown但不适用于keyupkeypress
2021-03-12 16:15:58
FWIW,cmd+e 在你的脚本中对我不起作用。Ctrl 触发您拥有的 CMD 图标
2021-03-14 16:15:58
.metaKey确实适用于最新的 Firefox、Safari 和 Opera。在 Chrome 中,.metaKey在 Control 上触发(而不是在 Command 上)。
2021-03-19 16:15:58
cmd+e 也不会为我触发事件(chrome)。ctrl+e 可以。
2021-03-20 16:15:58
在 MacOS 上使用 Firefox 4.0.1 似乎没有为我设置。鉴于接受的答案和链接的参考文献都不同意你所说的,我认为这个答案是不正确的。
2021-03-30 16:15:58

我发现如果与另一个键一起按下,您可以在最新版本的 Safari (7.0: 9537.71) 中检测到命令键。例如,如果您想检测 ⌘+x:,您可以检测 x 键并检查 event.metaKey 是否设置为 true。例如:

var key = event.keyCode || event.charCode || 0;
console.log(key, event.metaKey);

当单独按下 x 时,这将输出120, false. 按 ⌘+x 时,会输出120, true

这似乎只适用于 Safari - 而不适用于 Chrome

2017年的状态如何?
2021-03-20 16:15:58

根据 Ilya 的数据,我写了一个 Vanilla JS 库来支持 Mac 上的修饰键:https : //github.com/MichaelZelensky/jsLibraries/blob/master/macKeys.js

就这样使用它,例如:

document.onclick = function (event) {
  if (event.shiftKey || macKeys.shiftKey) {
    //do something interesting
  }
}

在 Mac 上的 Chrome、Safari、Firefox、Opera 上测试。请检查它是否适合您。

对于使用 jQuery 的人,有一个很好的插件来处理关键事件:

GitHub 上的 jQuery 热键

为了捕获+SCtrl+S我正在使用这个:

$(window).bind('keydown.ctrl_s keydown.meta_s', function(event) {
    event.preventDefault();
    // Do something here
});
效果太好了。所有其他按键也会被捕获。
2021-03-30 16:15:58
是否支持跨浏览器?
2021-04-08 16:15:58
如果您访问过我回答中的链接,您就会知道:github.com/tzuryby/jquery.hotkeys#jquery-compatibility
2021-04-10 16:15:58