คนหนึ่งจับคีย์คำสั่งของ Mac ผ่าน JavaScript ได้อย่างไร

ใครจะจับCmdคีย์ของ Mac ผ่าน JavaScript ได้?

แก้ไข:ในฐานะของ 2019 e.metaKeyจะได้รับการสนับสนุนบนเบราว์เซอร์ที่สำคัญทั้งหมดตาม MDN

โปรดทราบว่าใน Windows แม้ว่า⊞ Windowsคีย์จะถือเป็นคีย์ "เมตา" แต่เบราว์เซอร์จะไม่สามารถจับภาพได้

ใช้สำหรับคีย์คำสั่งบน MacOS / คีย์บอร์ดเท่านั้น

ซึ่งแตกต่างจากShift/ Alt/ Ctrlที่Cmd(“แอปเปิ้ล”) ที่สำคัญจะไม่ถือว่าเป็นตัวปรับแต่งที่สำคัญแทนคุณควรฟังบนkeydown/ และบันทึกเมื่อมีการกดแป้นแล้วเศขึ้นอยู่กับkeyupevent.keyCode

น่าเสียดายที่รหัสคีย์เหล่านี้ขึ้นอยู่กับเบราว์เซอร์:

• Firefox: 224
• Opera: 17
• เบราว์เซอร์ WebKit (Safari / Chrome): 91(คำสั่งด้านซ้าย) หรือ93(คำสั่งด้านขวา)

คุณอาจสนใจอ่านบทความJavaScript Madness: Keyboard Eventsซึ่งฉันได้เรียนรู้จากความรู้นั้น

นอกจากนี้คุณยังสามารถดูแอevent.metaKeyททริบิวในเหตุการณ์ได้หากคุณทำงานกับกิจกรรมดาวน์คีย์ ทำงานอย่างมหัศจรรย์สำหรับฉัน! คุณสามารถลองได้ที่นี่

ฉันพบว่าคุณสามารถตรวจจับคีย์คำสั่งใน Safari เวอร์ชันล่าสุด (7.0: 9537.71) ถ้ามันถูกกดร่วมกับคีย์อื่น ตัวอย่างเช่นหากคุณต้องการตรวจจับ⌘ + x: คุณสามารถตรวจจับปุ่ม x และตรวจสอบว่า event.metaKey ตั้งค่าเป็นจริง ตัวอย่างเช่น:

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

เมื่อกด x 120, falseที่มันเป็นตัวเองออกจะนี้ เมื่อกด⌘ + x จะเป็นการส่งออก120, true

ดูเหมือนว่าจะใช้งานได้ใน Safari เท่านั้นไม่ใช่ Chrome

เมื่อพิจารณาจากข้อมูลของ Ilya ฉันได้เขียนไลบรารี Vanilla JS สำหรับการสนับสนุนคีย์ตัวแก้ไขบน Mac: https://github.com/MichaelZelensky/jsLไลบรารี/blob/master/macKeys.js

ใช้มันแบบนี้เช่น:

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

ทดสอบบน Chrome, Safari, Firefox, Opera บน Mac โปรดตรวจสอบว่ามันเหมาะกับคุณหรือไม่

สำหรับผู้ที่ใช้ jQuery มีปลั๊กอินที่ยอดเยี่ยมสำหรับการจัดการเหตุการณ์สำคัญ:

ปุ่มลัด jQuery บน GitHub

สำหรับการจับภาพ⌘+ SและCtrl+ Sฉันใช้สิ่งนี้:

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

นี่คือวิธีที่ฉันทำใน 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()

หากคุณใช้ Vuej เพียงแค่สร้างโดยปลั๊กอิน vue-shortkey ทุกอย่างจะง่าย

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

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