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


当前回答

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

其他回答

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

keyCode和现在已弃用,因此建议避免在这里使用这些答案。

现在的一种方法是使用事件参数上的key属性,该参数随DOM keyup和keypress事件而来。下面是一个简单的例子:

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按键上触发。

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

编辑:截至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疯狂:键盘事件”这篇文章,我是从那里学到这些知识的。

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

GitHub上的jQuery热键

对于捕获⌘+S和Ctrl+S,我使用这个:

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

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

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

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