JavaScript를 통해 Mac의 명령 키를 어떻게 캡처합니까?

CmdJavaScript를 통해 Mac 키를 어떻게 캡처 합니까?

편집 : 2019 기준으로 e.metaKey한다 MDN에 따라 모든 주요 브라우저에서 지원 .

Windows에서는 ⊞ Windows키가 "메타"키로 간주 되지만 브라우저에서 캡처하지는 않습니다.

이것은 MacOS / 키보드의 명령 키에만 해당됩니다.

달리 Shift/ Alt/ Ctrl의 Cmd( "애플") 키는 수정으로 간주되지 않습니다 키 대신에 귀를 기울여야 keydown/ keyup키를 누르면 다음에 따라 우울 할 때 기록 event.keyCode.

불행히도, 이러한 키 코드는 브라우저에 따라 다릅니다.

• Firefox : 224
• 오페라: 17
• WebKit 브라우저 (Safari / Chrome) : 91(왼쪽 명령) 또는 93(오른쪽 명령)

JavaScript Madness : Keyboard Events 기사를 읽고 관심을 가질 수 있습니다 .

키 다운 event.metaKey이벤트로 작업하는 경우 이벤트 의 속성을 볼 수도 있습니다. 나를 위해 훌륭하게 일했습니다! 여기서 시도해 볼 수 있습니다 .

다른 키와 함께 누르면 최신 버전의 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

이것은 Chrome이 아닌 Safari에서만 작동하는 것 같습니다.

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에서 테스트되었습니다. 그것이 당신을 위해 작동하는지 확인하십시오.

jQuery를 사용하는 사람들에게는 주요 이벤트를 처리하기위한 훌륭한 플러그인이 있습니다.

GitHub의 jQuery 단축키

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

Vuejs를 사용하는 경우 vue-shortkey 플러그인으로 만들면 모든 것이 간단합니다.

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

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