CmdJavaScript経由でMacのキーを取得するにはどうすればよいですか?
CmdJavaScript経由でMacのキーを取得するにはどうすればよいですか?
回答:
EDIT: 2019年の時点では、e.metaKey
されてMDNあたりなど、すべての主要なブラウザでサポート。
Windowsでは、⊞ Windowsキーは「メタ」キーと見なされますが、ブラウザ自体ではキャプチャされないことに注意してください。
これは、MacOS /キーボードのコマンドキー専用です。
Shift/ Alt/ とは異なりCtrl、Cmd(「Apple」)キーは修飾キーとは見なされません。代わりに、keydown
/ keyup
をリッスンし、キーが押されたときに記録する必要があります。event.keyCode
。
残念ながら、これらのキーコードはブラウザに依存しています:
224
17
91
左コマンド)または93
(右コマンド)JavaScriptマッドネス:キーボードイベントの記事を読むことに興味があるかもしれません。
keydown
イベントではなく、ではなく機能することに注意してくださいkeyup
。
event.metaKey
キーダウンイベントを使用している場合は、イベントの属性を確認することもできます。私のために素晴らしく働きました!こちらでお試しいただけます。
.metaKey
実際、最新のFirefox、Safari、Operaで動作します。Chromeでは、.metaKey
(コマンドではなく)コントロールでトリガーします。
keydown
が、keyup
またはには機能しないことだと思いますkeypress
。
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、MacのOperaでテスト済み。動作するか確認してください。
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"