JavaScriptを介してMacのコマンドキーを取得するにはどうすればよいですか?


回答:


238

EDIT: 2019年の時点では、e.metaKeyされてMDNあたりなど、すべての主要なブラウザでサポート

Windowsでは、⊞ Windowsキーは「メタ」キーと見なされますが、ブラウザ自体ではキャプチャされないことに注意してください。

これは、MacOS /キーボードのコマンドキー専用です。


Shift/ Alt/ とは異なりCtrlCmd(「Apple」)キーは修飾キーとは見なされません。代わりに、keydown/ keyupをリッスンし、キーが押されたときに記録する必要があります。event.keyCode

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

  • Firefox: 224
  • オペラ: 17
  • WebKitブラウザー(Safari / Chrome):(91左コマンド)または93(右コマンド)

JavaScriptマッドネス:キーボードイベントの記事を読むことに興味があるかもしれません。


2
OperaがWebkitカテゴリにも含まれるようになったことを確認してください。91、93、および224を聞くだけで、仕事が完了すると思います。ちなみに17はCtrlです。古いOperaはCmdとCtrlを区別しませんでしたか?
Steven Lu

56
event.metaKeyは、Safari、Firefox、Chromeの現在のバージョンで魅力的に動作するようです。IMOそれは非常に明確な解決策です。
Miroslav Nedyalkov、2015年

5
ミロスラフのコメントに応えて、それはkeydownイベントではなく、ではなく機能することに注意してくださいkeyup
nachocab 2018年

209

event.metaKeyキーダウンイベントを使用している場合は、イベントの属性を確認することもできます。私のために素晴らしく働きました!こちらでお試しいただけます


MacOS上のFirefox 4.0.1では、これは設定されていないようです。受け入れられた回答とリンクされた参照の両方があなたが言ったことにも同意しないことを考えると、この回答は正しくないと思います。
Josh Glover

8
.metaKey実際、最新のFirefox、Safari、Operaで動作します。Chromeでは、.metaKey(コマンドではなく)コントロールでトリガーします。
Ilya Semenov

1
FWIW、cmd + eはスクリプトでは機能しません。Ctrlは、あなたが持っているCMDアイコンをトリガーします
Oscar Godson

1
cmd + eも、イベントを起動しません(クロム)。ctrl + eはそうします。
スペンサーウィリアムズ

23
トリックは(Chromeでも)、これは機能するkeydownが、keyupまたはには機能しないことだと思いますkeypress
philfreo 2012

15

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では機能しません


2017年の状況は?
SuperUberDuper 2017

13

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、MacのOperaでテスト済み。動作するか確認してください。


8

jQueryを使用している人のために、キーイベントを処理するための優れたプラグインがあります。

GitHubのjQueryホットキー

+ SCtrl+ Sをキャプチャするために、私はこれを使用しています:

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

1
うまくいきます。他のすべてのキー押下もキャプチャされます。
Felix Rabe 2013

クロスブラウザはサポートされていますか?
Adil Malik、

1
私の答えのリンクにアクセスした場合、あなたは知っているでしょう:github.com/tzuryby/jquery.hotkeys#jquery-compatibility
Koen。

3

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.