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

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

与Shift / Alt / Ctrl不同的是,Mac / Apple键不被认为是修饰键 – 相反,你应该在keydown / keyup上挂钩,并且当按下键然后按下event.keyCode时按下键。

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

Firefox: 224 Opera: 17 WebKit (Safari/Chrome): 91 (Left Apple) or 93 (Right Apple) 

您可能有兴趣阅读这篇文章: JavaScript疯狂:键盘我掌握了这些知识的事件。

如果您正在使用keydown事件,则还可以查看事件的event.metaKey属性。 为我工作非常好! 你可以在这里尝试 。

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

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

当按下它自己的时候,这将输出120, false 。 按⌘+ x时,将输出120, true

这似乎只能在Safari浏览器中运行,而不是Chrome浏览器

有一个javascript-lib: keymaster.js

(没有像jQuery的依赖)

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

jQuery在GitHub上的热键

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

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

基于Ilya的数据,我写了一个支持Mac上的修饰键的Vanilla JS库: 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上的Operatesting。 请检查它是否适用于您。

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