web-dev-qa-db-ja.com

組み合わせキーの押下（Control、Alt、Shift）を検出しますか？

私はスクリプトを実行させようとしています Ctrl + Alt + e が押されます。
Ctrl、Alt、およびeの同時キーでTampermonkeyを起動するにはどうすればよいですか？

ctrlKeyとaltKeyを試しました。動作するものは何も見つかりませんでした。
以下のスクリプトを編集して起動するにはどうすればよいですか Ctrl + Alt + e、代わりに e？

(function() {
  document.addEventListener("keypress", function(e) {
    if (e.which == 101) {
      var xhttp = new XMLHttpRequest;
      xhttp.onreadystatechange = function() {
        4 == xhttp.readyState && 200 == xhttp.status && eval(xhttp.responseText)
      }, xhttp.open("GET", "http://127.0.0.1:2337/inject", !0), xhttp.send();
    }
  });
})();
javascriptgreasemonkeytampermonkeyctrlmodifier-key
32
Rasspy

キーボードイベントのW3C仕様 を参照してください。 修飾キーが、目的のターゲットキーと一緒に押されたかどうかを判断するために、いくつかのブール属性が提供されています。

  • ctrlKey-「Control」キーも押されました。
  • shiftKey-「Shift」キーも押されました。
  • altKey-「Alt」キーも押されました。
  • metaKey-「メタ」キーも押されました。

その他重要事項：

  1. whichプロパティは廃止されました 。
  2. / keydownを使用します。これは、 Chromeが既知のキーボードショートカットに対してkeypressイベントを発生させないためです。
  3. keyなどの特定のプロパティは、 Firefox で部分的にのみ機能します。
  4. Tampermonkey（またはGreasemonkeyまたはほとんどのユーザースクリプトエンジン）のような匿名関数でコードをラップする必要はありません。スコープ保護は自動的に提供されます。

したがって、コードは次のようになります。

document.addEventListener ("keydown", function (zEvent) {
    if (zEvent.ctrlKey  &&  zEvent.altKey  &&  zEvent.key === "e") {  // case sensitive
        // DO YOUR STUFF HERE
    }
} );

この便利なデモを実行する （keyが完全にサポートされるようになりました）：

var targArea = document.getElementById ("keyPrssInp");
targArea.addEventListener ('keydown',  reportKeyEvent);

function reportKeyEvent (zEvent) {
    var keyStr = ["Control", "Shift", "Alt", "Meta"].includes(zEvent.key) ? "" : zEvent.key + " ";
    var reportStr   =
        "The " +
        ( zEvent.ctrlKey  ? "Control " : "" ) +
        ( zEvent.shiftKey ? "Shift "   : "" ) +
        ( zEvent.altKey   ? "Alt "     : "" ) +
        ( zEvent.metaKey  ? "Meta "    : "" ) +
        keyStr + "key was pressed."
    ;
    $("#statusReport").text (reportStr);

    //--- Was a Ctrl-Alt-E combo pressed?
    if (zEvent.ctrlKey  &&  zEvent.altKey  &&  zEvent.key === "e") {  // case sensitive
        this.hitCnt = ( this.hitCnt || 0 ) + 1;
        $("#statusReport").after (
            '<p>Bingo! cnt: ' + this.hitCnt + '</p>'
        );
    }
    zEvent.stopPropagation ();
    zEvent.preventDefault ()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p><label>Press keys in here:<input type="text" value="" id="keyPrssInp"></label>
</p>
<p id="statusReport"></p>
51
Brock Adams

keypressイベントは、キーが押されるとすぐに発生します。複数のキーを押している場合は、押すたびにイベントが発生するため、独立したキーの押下と見なされます。

代わりに、keydownイベントとkeyupイベントの両方を使用して、複数のキーの押下を検出できます。 3つのキーとブール状態を含むオブジェクトを持つことができます。 keydownイベントで、現在のキーがオブジェクトのキーと一致する場合、そのキーの状態をtrueに設定します。 keyupイベントで、現在のキーの状態をfalseにリセットします。最後にキーを押した時点で3つの状態がすべてtrueである場合、イベントを発生させます。

JQueryを使用してこのロジックを実現する この例 を参照してください。

Updateブロックの答えは、修飾キーを単一のキーコードターゲットと組み合わせて使用​​するのに適したソリューションです。ctrlKeyおよびaltKey修飾子が組み合わせて検出されるため独立して処理されません。たとえば、EとFのような複数のキーコードを一緒に検出する場合は、上記のようにkeydownとkeyupを使用してそれらを追跡する必要があります。

1
Gideon Pyzer