如何通过 JavaScript 捕获 Mac 的命令键?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/3902635/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How does one capture a Mac's command key via JavaScript?
提问by DataGreed
How does one capture a Mac's Cmdkey via JavaScript?
如何Cmd通过 JavaScript获取 Mac 的密钥?
回答by Ilya Semenov
EDIT:As of 2019, e.metaKey
is supported on all major browsers as per the MDN.
编辑:截至 2019 年,根据 MDN,所有主要浏览器e.metaKey
都支持。
Note that on Windows, although the ? Windowskey is considered to be the "meta" key, it is not going to be captured by browsers as such.
请注意,在 Windows 上,虽然? Windows键被认为是“元”键,但浏览器不会捕获它。
This is only for the command key on MacOS/keyboards.
这仅适用于 MacOS/键盘上的命令键。
Unlike Shift/Alt/Ctrl, the Cmd(“Apple”) key is not considered a modifier key—instead, you should listen on keydown
/keyup
and record when a key is pressed and then depressed based on event.keyCode
.
不同于Shift/ Alt/Ctrl时,Cmd(“苹果”)键不被认为是修饰键,相反,你应该听上keydown
/keyup
当按下一个键,然后郁闷基于和记录event.keyCode
。
Unfortunately, these key codes are browser-dependent:
不幸的是,这些关键代码取决于浏览器:
- Firefox:
224
- Opera:
17
- WebKit browsers (Safari/Chrome):
91
(Left Command) or93
(Right Command)
- 火狐:
224
- 歌剧:
17
- WebKit 浏览器(Safari/Chrome):(
91
左命令)或93
(右命令)
You might be interested in reading the article JavaScript Madness: Keyboard Events, from which I learned that knowledge.
您可能有兴趣阅读文章JavaScript 疯狂:键盘事件,我从中学到了这些知识。
回答by Sunny
You can also look at the event.metaKey
attribute on the event if you are working with keydown events. Worked wonderfully for me! You can try it here.
event.metaKey
如果您正在使用 keydown 事件,您还可以查看事件的属性。非常适合我!你可以在这里试试。
回答by cryptopay
I found that you can detect the command key in the latest version of Safari (7.0: 9537.71) if it is pressed in conjunction with another key. For example, if you want to detect ?+x:, you can detect the x key AND check if event.metaKey is set to true. For example:
我发现如果与另一个键一起按下,您可以在最新版本的 Safari (7.0: 9537.71) 中检测到命令键。例如,如果您想检测 ?+x:,您可以检测 x 键并检查 event.metaKey 是否设置为 true。例如:
var key = event.keyCode || event.charCode || 0;
console.log(key, event.metaKey);
When pressing x on it's own, this will output 120, false
. When pressing ?+x, it will output 120, true
当单独按下 x 时,这将输出120, false
. 当按下 ?+x 时,它会输出120, true
This only seems to work in Safari - not Chrome
这似乎只适用于 Safari - 不适用于 Chrome
回答by Michael Zelensky
Basing on Ilya's data, I wrote a Vanilla JS library for supporting modifier keys on Mac: https://github.com/MichaelZelensky/jsLibraries/blob/master/macKeys.js
根据 Ilya 的数据,我写了一个 Vanilla JS 库来支持 Mac 上的修饰键:https: //github.com/MichaelZelensky/jsLibraries/blob/master/macKeys.js
Just use it like this, e.g.:
像这样使用它,例如:
document.onclick = function (event) {
if (event.shiftKey || macKeys.shiftKey) {
//do something interesting
}
}
Tested on Chrome, Safari, Firefox, Opera on Mac. Please check if it works for you.
在 Mac 上的 Chrome、Safari、Firefox、Opera 上测试。请检查它是否适合您。
回答by Koen.
For people using jQuery, there is an excellent plugin for handling key events:
对于使用 jQuery 的人,有一个很好的插件来处理关键事件:
For capturing ?+Sand Ctrl+SI'm using this:
为了捕获?+S和Ctrl+S我正在使用这个:
$(window).bind('keydown.ctrl_s keydown.meta_s', function(event) {
event.preventDefault();
// Do something here
});
回答by Dinis Cruz
Here is how I did it in AngularJS
这是我在 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()
回答by cuimingda
if you use Vuejs, just make it by vue-shortkey plugin, everything will be simple
如果你使用Vuejs,只需通过vue-shortkey插件制作,一切都会变得简单
https://www.npmjs.com/package/vue-shortkey
https://www.npmjs.com/package/vue-shortkey
v-shortkey="['meta', 'enter']"·
@shortkey="metaEnterTrigged"