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

2020/10/21 14:21 · javascript ·  · 0评论

如何Cmd通过JavaScript捕获Mac的密钥?

编辑:截至2019年,根据MDN,所有主要浏览器e.metaKey支持该功能

请注意,在Windows上,尽管该⊞ Windows键被认为是“元”键,但它不会被浏览器捕获。

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


Shift/ Alt/不同CtrlCmd(“ Apple”)键不被认为是修饰键-相反,您应该在keydown/上聆听/keyup并记录何时按下某个键,然后基于进行按下event.keyCode

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

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

您可能对阅读文章JavaScript Madness:键盘事件感兴趣,我从中学到了这些知识。

event.metaKey如果您正在处理按键事件,则还可以查看事件属性。为我做得很棒!您可以在这里尝试

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

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

单独按x时,将输出120, false按⌘+ x时,将输出120, true

这似乎仅在Safari中有效-不适用于Chrome

基于Ilya的数据,我编写了一个Vanilla JS库来支持Mac上的修饰键:https : //github.com/MichaelZelensky/jsLibraries/blob/master/macKeys.js

像这样使用它,例如:

document.onclick = function (event) {
  if (event.shiftKey || macKeys.shiftKey) {
    //do something interesting
  }
}

在Mac上的Chrome,Safari,Firefox,Opera上进行了测试。请检查它是否适合您。

对于使用jQuery的人,有一个出色的插件可以处理关键事件:

GitHub上的jQuery热键

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

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

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

如果您使用Vuejs,只需通过vue-shortkey插件进行设置,一切将变得简单

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

v-shortkey="['meta', 'enter']"·
@shortkey="metaEnterTrigged"
本文地址:http://javascript.askforanswer.com/ruhetongguojavascriptbuhuomacdeminglingjian.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!