如何通过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
}
}
编辑:截至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
});
我发现在最新版本的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和现在已弃用,因此建议避免在这里使用这些答案。
现在的一种方法是使用事件参数上的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)。
推荐文章
- 检测用户何时离开网页的最佳方法?
- 当“模糊”事件发生时,我如何才能找到哪个元素的焦点去了*到*?
- React不会加载本地图像
- 如何将Blob转换为JavaScript文件
- 在另一个js文件中调用JavaScript函数
- 如何在svg元素中使用z索引?
- 如何求一个数的长度?
- 跨源请求头(CORS)与PHP头
- 如何用Express/Node以编程方式发送404响应?
- parseInt(null, 24) === 23…等等,什么?
- JavaScript变量声明在循环外还是循环内?
- 元素在“for(…in…)”循环中排序
- 在哪里放置JavaScript在HTML文件?
- 什么时候.then(success, fail)被认为是承诺的反模式?
- 从浏览器下载JSON对象作为文件