47


13

コマンドキーのjQueryキーコード

jQuery Event Keypress:どのキーが押されましたか?およびhttps://stackoverflow.com/questions/ 2445613 / how-can-i-check-if-key-is-pressed-during-click-event-with-jquery [jqueryでクリックイベント中にキーが押されたかどうかを確認するにはどうすればよいですか?]

しかし、私の質問は、すべてのブラウザで同じキーイベントを取得できるかどうかです。 現在、Firefoxは[.kbd]#command#ボタン(Mac)にコード224を提供し、ChromeとSafariは値91を提供することを知っています。 ユーザーがどのブラウザを使用しているかを単純に確認し、それに基づいてキーを押す、またはすべてのブラウザで1つのキーコードを取得できるようにする方法はありますか? 次の値を取得していることに注意してください。

var code = (evt.keyCode ? evt.keyCode : evt.which);

[.kbd] #command#/ [。kbd]#ctrl#(windows system)キーが押されたということだけを知っている必要があるという理由だけで、可能であればプラグインを使用したくない。

3 Answer


81


jQueryはすでにそれを処理しています。 コントロールが押されたかどうかを確認するには、次を使用する必要があります。

$(window).keydown(function (e){
    if (e.ctrlKey) alert("control");
});

修飾キーのリスト:

e.ctrlKey
e.altKey
e.shiftKey

そして、ファッジが示唆したように:

e.metaKey


11


[.kbd]#Command#キーが押された正確な瞬間に興味がない場合、別のキーが押されたときに押されるかどうかに関係なく、イベントの `metaKey`プロパティを使用できます。

それ以外の場合、「keydown」および「keyup」イベントの場合、必要なプロパティはすべてのブラウザーで「keyCode」です。 残念ながら、[。kbd]#Command#キーはすべてのブラウザで同じキーコードを使用しているわけではなく、左右 Commands have different values in WebKit (91 and 93 それぞれ)。 何らかのブラウザスニッフィングなしでこれらのキーを検出する簡単な方法はありませんが、あるかもしれません。 `which`プロパティは間違いなく役に立ちません。

詳細については、http://unixpapa.com/js/key.htmlにすべての主要なブラウザーでの主要なイベント処理の包括的なカバレッジがあります。


1


では、この実行可能なコードスニペットで実際に試してみてください。

$(window).on('keypress', function(event) {
  $("body").append($("").text(
       "ctrlKey " + event.ctrlKey
    + "; altKey " + event.altKey
    + "; metaKey " + event.metaKey
    + "; shiftKey " + event.shiftKey
    + "; isCommandPressed " + isCommandPressed(event)
  ));

});

function isCommandPressed(event) {
  return event.metaKey && ! event.ctrlKey;
}
Focus on this select control and try pressing keys:

Test