Detecting combination keypresses (Control, Alt, Shift)?

by

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>

More Related Contents:

  1. Choosing and activating the right controls on an AJAX-driven site
  2. jQuery in Greasemonkey 1.0 conflicts with websites using jQuery
  3. Run Greasemonkey script on the same page, multiple times?
  4. How to get an AJAX get-request to wait for the page to be rendered before returning a response?
  5. Can a website know if I am running a userscript?
  6. How to use greasemonkey to selectively remove content from a website
  7. Simulating a mousedown, click, mouseup sequence in Tampermonkey?
  8. Userscript to wait for page to load before executing code techniques?
  9. How to change a class CSS with a Greasemonkey/Tampermonkey script?
  10. Save images to hard disk WITHOUT prompt?
  11. How to exclude iframe in Greasemonkey or Tampermonkey?
  12. Storing user login/password input in a Greasemonkey script on install
  13. How to override the alert function with a userscript?
  14. Add a JavaScript button using Greasemonkey or Tampermonkey?
  15. How do I get Greasemonkey to click on a button that only appears after a delay?
  16. Get image data URL in JavaScript?
  17. Stop execution of Javascript function (client side) or tweak it
  18. Accessing Variables from Greasemonkey to Page & vice versa
  19. How can I intercept XMLHttpRequests from a Greasemonkey script?
  20. Detect iFrame embedding in Javascript
  21. Injecting JS functions into the page from a Greasemonkey script on Chrome
  22. How can I detect visited and unvisited links on a page?
  23. UserScripts & Greasemonkey: calling a website’s JavaScript functions
  24. Capturing ctrl+z key combination in javascript
  25. “getElementById not a function” when trying to parse an AJAX response?
  26. How to simulate typing in input field using jQuery?
  27. How can you determine the file size in JavaScript?
  28. Closure in Javascript [duplicate]
  29. How do I click on this button with Greasemonkey?
  30. Clicking a button on a page using a Greasemonkey/userscript in Chrome

Leave a Comment