如何通过JavaScript捕获Mac的Cmd键?


当前回答

如果你使用vue-shortkey插件,一切都会很简单

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

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

其他回答

var element = //the DOM element to listen for the key on.
element.onkeyup = function(e) {
   if(e.metaKey) {
      //command key was pressed
   }
}

编辑:截至2019年,根据MDN,所有主要浏览器都支持e.m akey。

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

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


与Shift/Alt/Ctrl不同,Cmd(“Apple”)键不被认为是修饰键,相反,您应该根据event.keyCode监听keydown/keyup并记录何时按下键,然后按下键。

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

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

您可能有兴趣阅读“JavaScript疯狂:键盘事件”这篇文章,我是从那里学到这些知识的。

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

如果你使用vue-shortkey插件,一切都会很简单

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

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

你也可以查看事件。如果您正在处理keydown事件,则事件上的metaKey属性。对我来说效果非常好!你可以在这里试试。