JSFiddle - React, Tailwind, and code Playground
HTML
<div id="keys"></div>
<div id="test"></div>
JavaScript
var CMD = 8, // bitmask values
SHIFT = 4,
ALT = 2,
CTRL = 1;
(function() {
var e = document.getElementById('keys'),
modifiers = 0;
function modifierCode(event) {
switch (event.keyCode) {
case 91:
case 93:
return CMD;
case 16:
return SHIFT;
case 18:
return ALT;
case 17:
return CTRL;
default:
return 0;
}
}
document.addEventListener('keydown', function(event) {
var modifier = modifierCode(event);
if (modifier !== 0) {
modifiers = modifiers | modifier; // add to the bitmask "stack"
} else {
// call a handler
exampleCallback(event, modifiers);
// some extra stuff to show the key combo
e.innerHTML = 'Key combo: ';
if (modifiers & CTRL) {
e.innerHTML += "⌃";
}
if (modifiers & ALT) {
e.innerHTML += "⌥";
}
if (modifiers & SHIFT) {
e.innerHTML += "⇧";
}
if (modifiers & CMD) {
e.innerHTML += "⌘";
}
// converting the keyidentifier to a char is pretty ridiculous
e.innerHTML += String.fromCharCode(parseInt(event.keyIdentifier.replace(/^U\+0*/, ''), 16));
}
});
document.addEventListener('keyup', function(event) {
modifiers = modifiers & ~modifierCode(event); // remove from the stack
});
function exampleCallback(event, modifiers) {
if (event.keyIdentifier === 'U+003D' && modifiers & CMD) {
document.getElementById('test').innerHTML = "Success!";
} else {
document.getElementById('test').innerHTML = "";
}
// for testing
event.preventDefault();
event.stopPropagation();
}
}());