Macのキャプチャ方法 Cmd JavaScript経由のキー?
とは異なり Shift/Alt/Ctrl、 Cmd (「Apple」)キーは修飾キーとは見なされません。代わりに、keydown
/keyup
をリッスンし、event.keyCode
に基づいてキーが押されてから押されたときを記録する必要があります。
残念ながら、これらのキーコードはブラウザに依存しています。
224
17
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
が出力されます
これはSafariでのみ動作するようです-Chromeではありません
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、Opera on Macでテスト済み。動作するかどうかを確認してください。
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"