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

Posted 2023-02-19

【中文标题】如何通过 JavaScript 捕获 Mac 的命令键？

【英文标题】：How does one capture a Mac's command key via JavaScript?

【发布时间】：2011-04-23 14:10:46

【问题描述】：

如何通过 javascript 捕获 Mac 的 Cmd 键？

【问题讨论】：

使用这个github.com/madrobby/keymaster

有一个 javascript-lib ：keymaster.js（没有像 jquery 这样的依赖项）

【参考方案1】：

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)被按下了。

【参考方案2】：

如果您正在处理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。

【参考方案3】：

这是我在 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()

【参考方案4】：

编辑：截至 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

【参考方案5】：

如果你使用Vuejs，只需通过vue-shortkey插件制作，一切都会变得简单

https://www.npmjs.com/package/vue-shortkey

v-shortkey="['meta', 'enter']"·
@shortkey="metaEnterTrigged"

【参考方案6】：

根据 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 上测试。请检查它是否适合您。

【参考方案7】：

我发现你可以在最新版本的 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年情况如何？

【参考方案8】：

对于使用 jQuery 的人来说，有一个出色的插件来处理关键事件：

jQuery hotkeys on GitHub

为了捕获 ⌘+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

【参考方案9】：

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')