Detecting combination keypresses (Control, Alt, Shift)?

Question

I am trying to make a script run when Ctrl + Alt + e is pressed.
How can Tampermonkey fire on a simultaneous ctrl, alt, and e key?

I have tried ctrlKey, and altKey. I've found nothing that works.
How can I edit the script below to fire on Ctrl + Alt + e, instead of just 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();
    }
  });
})();

Answer 1

Refer to the W3C spec for keyboard events. Several boolean attributes are provided to determine if modifier keys were pressed in conjunction with whatever target key you are interested in. They are:

• ctrlKey     -- The "Control" key was also pressed.
• shiftKey   -- The "Shift" key was also pressed.
• altKey       -- The "Alt" key was also pressed.
• metaKey     -- The "Meta" key was also pressed.

Other important notes:

1. The which property is deprecated.
2. Use keydown because Chrome does not fire the keypress event for known keyboard shortcuts.
3. Some spec'd properties, such as key, are only partly functional in Firefox.
4. You do not need to wrap your code in an anonymous function like that for Tampermonkey (or Greasemonkey or most userscript engines). Scope protection is automatically provided.

So, your code would become:

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

---

Run this handy demo ^{_{(updated now that key has full support)}}:

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>

Answer 2

The keypress event is fired as soon as a key has been pressed. If you are pressing multiple keys, it will fire the event for each press, so they are considered independent key presses.

Instead, you can use both the keydown and keyup events to detect multiple key presses. You can have an object that contains the 3 keys and a boolean state. On the keydown event, if the current key matches a key in the object, you set the state to true for that key. On the keyup event, you reset the state for the current key to false. If all 3 states are true at the time of the last key press, then fire the event.

See this example that achieves this logic using jQuery.

Update Brock's answer is a better solution for you using modifier keys in combination with a single key code target, as the ctrlKey and altKey modifiers are detected in combination, not handled independently. If you want to detect multiple key codes like, E and F together, for example, you'd need to keep track of them using keydown and keyup as per above.

Answer 3

If you, like me, came here to find out how to detect the combination of the "Alt Gr" key with a letter key, then the properties like for example event.altKey cannot be used for this, since there is no event.AltGrKey property.

In that case you can use

event.getModifierState('AltGraph')

For more details see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState

Answer 4

I'm using hotkeys-js to abstract the functionality, but still had to let the user choose his own custom shortcut (without knowing it in advance). I then tried @Brock Adams's answer to get an equivalent format of hotkeys-js of the shortcut pressed in an input box.

Things I've found while experimenting (on an Italian QWERTY keyboard layout on Chrome 92):

• Every AltGr character "loses" the modifier attributes. AltGr can be substituted with Ctrl+Alt combination. So Ctrl+Alt+E (as in OP question) gives out €. Same it's true for Ctr+Alt+5. Other combinations have the same problem, like Ctrl+Alt+ò which on Italian keyboards gives out @
• Every Shifted character is found in e.key as it's shifted counterpart, keeping the modifier attributes, so Shift+5 prints out as Shift+% which is questionable (given the AltGr behaviour).
• Some combinations don't trigger the event no matter what. I've found as examples Ctrl+Shift+9, Ctrl+Shift+0, Ctrl+Shift+L and Ctrl+Shift+Alt+D on my keyboard. That might be a limitation of membrane keyboards.

The second point was critical for me, since our clients are used to Ctrl+Shift+[Number] combinations.

I've solved it by handling the special case of keyCode being between 48 and 58 and converting manually to the corresponding digit. It still doesn't solve any other special character modified with Shift though, but given that they are extremely depended on the keyboard layout, I don't see any universal solution. Still, I've never known anyone that wanted a shortcut with special characters.

const input = document.getElementById("keyPrssInp");
input.addEventListener('keydown', e => {
  input.value = `${e.ctrlKey ? 'ctrl+' : ''}${e.shiftKey ? 'shift+' : ''}${e.altKey ? 'alt+' : ''}${e.metaKey ? 'meta+' : ''}${["Control", "Shift", "Alt", "Meta"].includes(e.key) ? "" : (e.keyCode < 58 && e.keyCode > 47 ? e.keyCode - 48 : e.key)}`
  e.preventDefault();
});

Press keys in here: <input type="text" value="" id="keyPrssInp">

If readability is not a requirement and/or you know in advance the key combination you want to check, using event.keyCode instead of event.key is probably safer.

Answer 5

Quick note. If you're detecting shift, then you need to capitalize whatever letter you're checking. Shift capitalizes the normally lowercase letter.

if (zEvent.shiftKey && zEvent.key === "T")

vs

if (zEvent.ctrlKey && zEvent.key === "t")

if (zEvent.altKey && zEvent.key === "t")