How to detect keyboard shortcut in JS? (In my case Alt+Z)

Question

So on my website, I want to make a little box that shows the current mouse position only when I hold Alt+Z and disappear when I release the hotkey.

Answer 1

You can do that by adding the next method to the document.onkeyup event:

document.onkeyup = function(e) {
  if (e.altKey && event.key == "z") {
    alert("ALT + Z keys were pressed");
  }
};

Answer 2

You can listen for a shortcut (an event) using the addEventListener method:

document.addEventListener('keyup', function (event) {
    if (event.key == "z" && event.altKey){
        console.log("Alt + Z pressed!")
        // Do some other stuff here
    }
})

This applies to the entire document; If you want to only add the listener for a certain element, this method would exist for that HTMLElement too.

Here's a live jsfiddle demo.

Answer 3

This should solve your problem.

window.addEventListener("keydown", e => {
    if(e.keyCode == 90 && e.altKey) alert("Hello World!");
});