Bagaimana cara menangkap kunci perintah Mac melalui JavaScript?

Bagaimana cara menangkap Cmdkunci Mac melalui JavaScript?

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.

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 .

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

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.

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
});

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

jika Anda menggunakan Vuejs, cukup buat dengan vue-shortkey plugin, semuanya akan sederhana

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

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