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

Question

如何通过JavaScript捕获Mac的Cmd密钥？

Answer 1

与Shift / Alt / Ctrl不同，Cmd（“Apple”）键不被视为修饰键 - 相反，您应该在keydown / keyup上听，并在按下键然后按下event.keyCode时进行记录。

不幸的是，这些密钥代码依赖于浏览器：

• Firefox：224
• 歌剧：17
• WebKit浏览器（Safari / Chrome）：91（左命令）或93（右命令）

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

Answer 2

如果您正在使用keydown事件，还可以查看事件的event.metaKey属性。为我精彩的工作！ You can try it here。

Answer 3

我发现如果与另一个键一起按下，你可以在最新版本的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

Answer 4

基于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
  }
}

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

Answer 5

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

jQuery hotkeys on GitHub

要捕获⌘+ S和Ctrl + S，我使用此方法：

$(window).bind('keydown.ctrl_s keydown.meta_s', function(event) {
    event.preventDefault();
    // Do something here
});

Answer 6

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

Answer 7

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

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

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