Detecting combination keypresses (Control, Alt, Shift)?

Asked
Active3 hr before
Viewed126 times

6 Answers

combinationdetecting
90%

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:,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.,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).,Use keydown because Chrome does not fire the keypress event for known keyboard shortcuts.

So, your code would become:

document.addEventListener("keydown", function(zEvent) {
   if (zEvent.ctrlKey && zEvent.altKey && zEvent.key === "e") { // case sensitive
      // DO YOUR STUFF HERE
   }
});
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>
load more v
88%

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?,ctrlKey     -- The "Control" key was also pressed.,Some spec'd properties, such as key, are only partly functional in Firefox.,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();
      }
   });
})();
load more v
72%

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?,ctrlKey     -- The "Control" key was also pressed.,Some spec'd properties, such as key, are only partly functional in Firefox.

(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();
      }
   });
})();
load more v
65%

Detecting control-click, command-click, meta-click, alt-click and shift-click in JavaScript without listening to keydown events is straightforward.,A vanilla JavaScript click listener with command, control, alt and shift detectionDetect alt + clickDetect ctrl + clickDetect shift + clickDetect ctrl or command + click,The pseudocode for ctrl, command/windows (meta), alt and shift click detection is the following:,A ModifierClick component in Vue.js uses @click modifiers to detect regular clicks with @click.exact, alt-click with @click.alt, shift-click with @click.shift, command/control-click with @click.ctrl and @click.meta respectively.

element.addEventListener('click', function(e) {
   console.log(e.shiftKey); // shift
   console.log(e.ctrlKey); // ctrl
   console.log(e.altKey); // alt
   console.log(e.metaKey); // command/windows (meta) key
});
load more v
75%

View Javascript questions,If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.,View Unanswered Questions,Collaboration / Beta Testing

<script type="text/javascript">

       document.onkeypress = clickRadio;

       function clickRadio(e) {
           if (window.event)
               var keyCode = window.event.keyCode;       // IE
           else
               var keyCode = e.which;

               if (keyCode == 65 || keyCode == 97 || keyCode == 68 || keyCode == 100) {
                   setRadioButton(keyCode);
               }
       }
       function setRadioButton(whichKey) {}</script>
load more v
40%

Modifier keys such as Shift, Ctrl, Alt, and Meta (Command on Mac) generate key events just like normal keys. But when looking for key combinations, you can also find out whether these keys are held down by looking at the shiftKey, ctrlKey, altKey, and metaKey properties of keyboard and mouse events.,Event handlers make it possible to detect and react to events we have no direct control over. The addEventListener method is used to register such a handler.,Other keys have less predictable key codes. The best way to find the codes you need is usually by experimenting—register a key event handler that logs the key codes it gets and press the key you are interested in.,Unlike the events discussed earlier, these two events do not propagate. A handler on a parent element is not notified when a child element gains or loses focus.

Identifying the letter typed requires looking at the keyCode or charCode property and comparing that with the codes for the letters you want to filter. In "keydown", you do not have to worry about lowercase and uppercase letters, since it identifies only the key pressed. If you decide to handle "keypress" instead, which identifies the actual character typed, you have to make sure you test for both cases. One way to do that would be this:

/[qwx]/i.test(String.fromCharCode(event.charCode))

Other "combination-detecting" queries related to "Detecting combination keypresses (Control, Alt, Shift)?"