web-dev-qa-db-ja.com

JavaScriptを使用してMacのコマンドキーをキャプチャする方法

Macのキャプチャ方法 Cmd JavaScript経由のキー？

javascriptdom-events
157
DataGreed

とは異なり Shift/Alt/Ctrl、 Cmd （「Apple」）キーは修飾キーとは見なされません。代わりに、keydown/keyupをリッスンし、event.keyCodeに基づいてキーが押されてから押されたときを記録する必要があります。

残念ながら、これらのキーコードはブラウザに依存しています。

  • Firefox：224
  • Opera：17
  • WebKitブラウザー（Safari/Chrome）：91（左コマンド）または93（右コマンド）

あなたは記事を読むことに興味があるかもしれません JavaScript Madness：Keyboard Events 、私はそこからその知識を学びました。

214
Ilya Semenov

キーダウンイベントを使用している場合は、イベントのevent.metaKey属性を確認することもできます。私のために素晴らしかった！ ここで試せます 。

197
Sunny

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ではありません

13
cryptopay

Ilyaのデータに基づいて、Macで修飾キーをサポートするためのVanilla JSライブラリを作成しました。 https://github.com/MichaelZelensky/jsLibraries/blob/master/macKeys.js

このように使用します、例：

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

Chrome、Safari、Firefox、Opera on Macでテスト済み。動作するかどうかを確認してください。

10
Michael Zelensky

JQueryを使用している人には、主要なイベントを処理するための優れたプラグインがあります。

GitHubのjQueryホットキー

キャプチャ用 ⌘+S そして Ctrl+S 私はこれを使用しています：

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

これが私が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()
3
Dinis Cruz

vuejsを使用する場合、vue-shortkeyプラグインで作成するだけで、すべてが簡単になります。

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

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