Bir Mac'in komut tuşunu JavaScript ile nasıl yakalar?


Yanıtlar:


238

DÜZENLEME: 2019 tarihi itibariyle e.metaKeyolan MDN uyarınca tüm büyük tarayıcılarda desteklenir .

Windows'da, ⊞ Windowsanahtar "meta" anahtarı olarak kabul edilmesine rağmen, tarayıcılar tarafından bu şekilde yakalanmayacağını unutmayın.

Bu yalnızca MacOS / klavyelerdeki komut tuşu içindir.


Shift/ Alt/ Öğesinden farklı olarak Ctrl, Cmd(“Apple”) tuşu değiştirici bir anahtar olarak kabul edilmez; bunun yerine, bir tuşa basıldığında ve ardından tuşa basıldığında dinlemeniz keydown/ keyupkaydetmeniz gerekir event.keyCode.

Ne yazık ki, bu anahtar kodları tarayıcıya bağlıdır:

  • Firefox: 224
  • Opera: 17
  • WebKit tarayıcıları (Safari / Chrome): 91(Sol Komut) veya 93(Sağ Komut)

Bu bilgiyi öğrendiğim JavaScript Madness: Keyboard Events makalesini okumak isteyebilirsiniz .


2
Opera'nın artık Webkit kategorisinde olduğunu bilin. Bence sadece 91, 93 ve 224'ü dinlemek işi halledecek. 17 bu arada Ctrl. Eski Opera Cmd ve Ctrl'i ayırt etmedi mi?
Steven Lu

56
Event.metaKey, Safari, Firefox ve Chrome'un mevcut sürümlerinde bir cazibe gibi çalışıyor gibi görünüyor. IMO çok açık bir çözümdür.
Miroslav Nedyalkov

5
Miroslav'ın yorumuna yanıt olarak, sadece keydownolaylarda çalıştığını unutmayın keyup.
nachocab

209

Ayrıca event.metaKey, tuş takımı olaylarıyla çalışıyorsanız olayın özelliğine de bakabilirsiniz . Benim için harika çalıştı! Burada deneyebilirsiniz .


MacOS'ta Firefox 4.0.1 ile bu benim için ayarlanmış gibi görünmüyor. Kabul edilen cevabın ve bağlantılı referansın hem söylediklerinize katılmadığı düşünüldüğünde, bu cevabın yanlış olduğunu düşünüyorum.
Josh Glover

8
.metaKeygerçekten de en son Firefox, Safari ve Opera'da çalışıyor. Chrome'da, .metaKeyKontrolü etkinleştirir (Komutta değil).
Ilya Semenov

1
FWIW, cmd + e senaryonuzda benim için çalışmıyor. Ctrl, sahip olduğunuz CMD simgesini tetikler
Oscar Godson

1
cmd + e olayı benim için de tetiklemiyor (krom). ctrl + e yapar.
Spencer Williams

23
Bence hilesi (Chrome'da bile) bunun işe yaradığı keydownama DEĞİLDİR keyupya da DEĞİLDİR keypress.
philfreo

15

Safari'nin son sürümünde (7.0: 9537.71) başka bir tuşla birlikte basılırsa komut tuşunu algılayabildiğinizi buldum. Örneğin, ⌘ + x: algılamak istiyorsanız x tuşunu algılayabilir VE event.metaKey'in true olarak ayarlanıp ayarlanmadığını kontrol edebilirsiniz. Örneğin:

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

X'e tek başına bastığınızda, bu çıktı verir 120, false. ⌘ + x tuşlarına bastığınızda,120, true

Bu yalnızca Safari'de çalışıyor gibi görünüyor - Chrome'da değil


2017'deki durum nedir?
SuperUberDuper

13

Ilya'nın verilerine dayanarak, Mac'te değiştirici anahtarları desteklemek için bir Vanilla JS kütüphanesi yazdım: https://github.com/MichaelZelensky/jsLibraries/blob/master/macKeys.js

Sadece böyle kullanın, örneğin:

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

Mac'te Chrome, Safari, Firefox, Opera'da test edildi. Lütfen sizin için çalışıp çalışmadığını kontrol edin.


8

JQuery kullanan kişiler için, önemli olayları yönetmek için mükemmel bir eklenti vardır:

GitHub'daki jQuery kısayol tuşları

+ SVe Ctrl+ yakalamak içinS bunu kullanıyorum:

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

1
Çok iyi çalışıyor. Diğer tüm tuşlara basıldığında da yakalanır.
Felix Rabe

Çapraz tarayıcı destekleniyor mu?
Adil Malik


3

AngularJS'de nasıl yaptım

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()

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.