如何通过JavaScript捕获mac的命令键?

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

164245 次浏览
小开 
var element = //the DOM element to listen for the key on.
element.onkeyup = function(e) {
if(e.metaKey) {
//command key was pressed
}
}
小开
最佳答案

截至2019年，e.metaKey为根据MDN，所有主要浏览器都支持。

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

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

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

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

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

你可能有兴趣阅读文章疯狂JavaScript:键盘事件，从我学到的知识。

小开

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

小开

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

jQuery热键在GitHub上

为了捕获⌘+年代和Ctrl+年代，我使用这个:

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

我发现在最新版本的Safari(7.0: 9537.71)中，如果命令键与另一个键同时按下，就可以检测到它。例如，如果你想检测⌘+x:，你可以检测x键并检查if事件。metaKey设置为true。例如:

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

当单独按下x时，它将输出120, false。当按⌘+x时，它将输出120, true

这似乎只适用于Safari浏览器，而不适用于Chrome浏览器

小开

基于Ilya的数据，我编写了一个香草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上进行了测试。请检查是否适合您。

小开

下面是我在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"
小开

keyCode和which现在是弃用，所以建议避免在这里使用这些答案。

现在一种方法是在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上的cmd键(请参阅MDN文档中的Meta)。这里唯一需要注意的是，对于支持它的用户键盘/操作系统，它也会在Windows按键上触发。

如果你需要更细粒度地了解哪个元键被按下了，你可以使用事件上的code属性，它可以是__ABC1或MetaRight，这取决于按下了哪个物理元键(cmd)。


提交答案