【发布时间】：2022-01-12 07:28:06
【问题描述】：
如何通过 JavaScript 捕获 Mac 的 Cmd 键？
【问题讨论】：
-
有一个 javascript-lib ：keymaster.js（没有像 jquery 这样的依赖项）
标签： javascript dom-events
【发布时间】：2022-01-12 07:28:06
【问题描述】：
编辑：截至 2019 年，e.metaKey 为 supported on all major browsers as per the MDN。
请注意，在 Windows 上，虽然 ⊞ Windows 键被认为是“元”键，但它不会被浏览器捕获。
这仅适用于 MacOS/键盘上的命令键。
与 Shift/Alt/Ctrl 不同，Cmd（“Apple”）键不被视为修饰键——相反，您应该在 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 吗？？
-
似乎 event.metaKey 在当前版本的 Safari、Firefox 和 Chrome 中工作就像一个魅力。 IMO 这是非常明确的解决方案。
-
针对 Miroslav 的评论，请注意它仅适用于
keydown事件，不适用于keyup。 -
回应@nachocab 的评论：e.key === 'Meta' 适用于 keydown 和 keyup。所以可以用这个代替e.metaKey
如果您正在处理keydown 事件，还可以查看事件的event.metaKey 属性。为我工作得非常好！ You can try it here.
【讨论】：
-
MacOS 上的 Firefox 4.0.1 似乎没有为我设置。鉴于接受的答案和链接的参考都与您所说的不一致，我认为这个答案是不正确的。
-
.metaKey确实适用于最新的 Firefox、Safari 和 Opera。在 Chrome 中，.metaKey在 Control（而非 Command）上触发。 -
FWIW，cmd+e 在您的脚本中对我不起作用。 Ctrl 触发你拥有的 CMD 图标
-
cmd+e 也不会为我触发事件（chrome）。 ctrl+e 可以。
-
我认为诀窍（即使在 Chrome 中）是这适用于
keydown，但不适用于keyup或keypress。
我发现你可以在最新版本的 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年情况如何？
根据 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 的人来说，有一个出色的插件来处理关键事件：
为了捕获 ⌘+S 和 Ctrl+S 我正在使用这个：
$(window).bind('keydown.ctrl_s keydown.meta_s', function(event) {
event.preventDefault();
// Do something here
});
【讨论】：
-
效果太好了。所有其他按键也会被捕获。
-
是否支持跨浏览器？
-
如果您访问了我回答中的链接，您就会知道：github.com/tzuryby/jquery.hotkeys#jquery-compatibility
这是我在 AngularJS 中的做法
app = angular.module('MM_Graph')
class Keyboard
constructor: ($injector)->
@.$injector = $injector
@.$window = @.$injector.get('$window') # get reference to $window and $rootScope objects
@.$rootScope = @.$injector.get('$rootScope')
on_Key_Down:($event)=>
@.$rootScope.$broadcast 'keydown', $event # broadcast a global keydown event
if $event.code is 'KeyS' and ($event.ctrlKey or $event.metaKey) # detect S key pressed and either OSX Command or Window's Control keys pressed
@.$rootScope.$broadcast '', $event # broadcast keyup_CtrS event
#$event.preventDefault() # this should be used by the event listeners to prevent default browser behaviour
setup_Hooks: ()=>
angular.element(@.$window).bind "keydown", @.on_Key_Down # hook keydown event in window (only called once per app load)
@
app.service 'keyboard', ($injector)=>
return new Keyboard($injector).setup_Hooks()
【讨论】：
var element = //the DOM element to listen for the key on.
element.onkeyup = function(e) {
if(e.metaKey) {
//command key was pressed
}
}
【讨论】：
-
var element = document.body; element.onKeyUp = function(e) { if(e.metaKey) { console.log('cmd press') } }
keyCode 和 which 现在是 deprecated，因此建议避免使用此处的答案。
现在执行此操作的一种方法是在 DOM keyup 和 keypress 事件附带的事件参数上使用 key 属性。下面是一个简单的例子：
document.onkeypress = (event) => {
if (event.key === 'Meta') {
console.log("Mac or Windows key was pressed!");
} else {
console.log("Another key was pressed")
}
}
这将在 Mac (See Meta on the MDN docs) 上按下 cmd 键时触发。这里唯一需要注意的是它也会在 Windows 按键上触发，用户键盘/操作系统也支持它。
如果您需要更详细地了解按下了哪个元键，您可以在事件上使用 code 属性，该属性可以是 MetaLeft or MetaRight，具体取决于哪个物理元键 (cmd)被按下了。
【讨论】：
如果你使用Vuejs，只需通过vue-shortkey插件制作，一切都会变得简单
https://www.npmjs.com/package/vue-shortkey
v-shortkey="['meta', 'enter']"·
@shortkey="metaEnterTrigged"
【讨论】：