Bagaimana cara menangkap kunci perintah Mac melalui JavaScript?

Jawaban:

238

EDIT: Pada 2019, e.metaKeyadalah didukung di semua browser utama sesuai MDN .

Perhatikan bahwa pada Windows, meskipun ⊞ Windowskunci tersebut dianggap sebagai kunci "meta", itu tidak akan ditangkap oleh browser seperti itu.

Ini hanya untuk kunci perintah pada MacOS / keyboard.

Tidak seperti Shift/ Alt/ Ctrl, tombol Cmd("Apple") tidak dianggap sebagai kunci pengubah — sebaliknya, Anda harus mendengarkan pada keydown/ keyupdan merekam ketika tombol ditekan dan kemudian ditekan berdasarkan event.keyCode.

Sayangnya, kode-kode kunci ini tergantung pada browser:

  • Firefox: 224
  • Opera: 17
  • Browser WebKit (Safari / Chrome): 91(Perintah Kiri) atau 93(Perintah Kanan)

Anda mungkin tertarik membaca artikel JavaScript Madness: Keyboard Events , dari mana saya belajar pengetahuan itu.

Ilya Semenov
sumber
2
Ketahuilah bahwa Opera sekarang juga berada di bawah kategori Webkit. Saya pikir hanya mendengarkan 91, 93, dan 224, akan menyelesaikan pekerjaan. 17 adalah Ctrl, omong-omong. Apakah Opera lama tidak membedakan Cmd dan Ctrl ??
Steven Lu
56
Tampaknya event.metaKey berfungsi di versi Safari, Firefox, dan Chrome saat ini seperti pesona. IMO itu solusi yang jauh lebih jelas.
Miroslav Nedyalkov
5
Menanggapi komentar Miroslav, perhatikan saja bahwa itu hanya berfungsi pada keydownacara, tidak keyup.
nachocab
209

Anda juga dapat melihat event.metaKeyatribut pada acara tersebut jika Anda bekerja dengan acara keydown. Bekerja sangat baik untuk saya! Anda bisa mencobanya di sini .

Cerah
sumber
Itu tampaknya tidak diatur untuk saya dengan Firefox 4.0.1 di MacOS. Mengingat bahwa jawaban yang diterima dan referensi terkait keduanya tidak setuju dengan apa yang Anda katakan juga, saya pikir jawaban ini salah.
Josh Glover
8
.metaKeymemang berfungsi di Firefox, Safari, dan Opera terbaru. Di Chrome, .metaKeytrigger on Control (bukan on Command).
Ilya Semenov
1
FWIW, cmd + e tidak berfungsi untuk saya dalam skrip Anda. Ctrl untuk memicu ikon CMD yang Anda miliki
Oscar Godson
1
cmd + e juga tidak memecat saya (chrome). ctrl + e tidak.
Spencer Williams
23
Saya pikir triknya (bahkan di Chrome) adalah ini berfungsi keydowntetapi BUKAN untuk keyupatau keypress.
philfreo
15

Saya menemukan bahwa Anda dapat mendeteksi kunci perintah di versi terbaru Safari (7.0: 9537.71) jika ditekan bersamaan dengan tombol lain. Misalnya, jika Anda ingin mendeteksi ⌘ + x :, Anda dapat mendeteksi tombol x DAN memeriksa apakah event.metaKey disetel ke true. Sebagai contoh:

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

Ketika menekan x itu sendiri, ini akan menampilkan 120, false. Saat menekan ⌘ + x, itu akan ditampilkan120, true

Ini sepertinya hanya berfungsi di Safari - bukan Chrome

cryptopay
sumber
apa status di 2017?
SuperUberDuper
13

Mendasarkan pada data Ilya, saya menulis perpustakaan Vanilla JS untuk mendukung kunci pengubah pada Mac: https://github.com/MichaelZelensky/jsLibraries/blob/master/macKeys.js

Gunakan saja seperti ini, misalnya:

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

Diuji pada Chrome, Safari, Firefox, Opera di Mac. Silakan periksa apakah itu bekerja untuk Anda.

Michael Zelensky
sumber
8

Untuk orang yang menggunakan jQuery, ada plugin yang sangat baik untuk menangani acara utama:

tombol cepat jQuery di GitHub

Untuk menangkap ⌘+ Sdan Ctrl+ Ssaya menggunakan ini:

$(window).bind('keydown.ctrl_s keydown.meta_s', function(event) {
    event.preventDefault();
    // Do something here
});
Koen.
sumber
1
Bekerja terlalu baik. Semua penekanan tombol lainnya juga ditangkap.
Felix Rabe
Apakah ini mendukung browser lintas?
Adil Malik
1
Jika Anda mengunjungi tautan dalam jawaban saya, Anda akan tahu: github.com/tzuryby/jquery.hotkeys#jquery-compatibility
Koen.
3

Inilah cara saya melakukannya di 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()
Dinis Cruz
sumber