Detect and print key combinations Javascript

Question

I'm currently trying to convert user-provided keyboard combinations into their printable versions (so for example if a user presses shift + a I want to be able to detect it and print the string "shift + a" somewhere so that the user knows which combination he associated with the action.

So far I've been using the provided booleans: ctrlKey, altKey, shiftKey and metaKey, and when they're true I add their printable versions to the final string.

It works... to some extent...

I correctly receive the ctrl flag, but the shift flag is erratic (giving shifts when it should not and not giving shifts when it should, although it works OK for some keys) and the alt flag seems to work only on a few keys and the meta flag does not seem to work at all. Note that my keyboard works properly, that is, these keys work as intended in normal conditions (the shift key allows me to capitalize, the win key allows me to lock my computer, etc...) Also note that my keyboard is an azerty.

It behaves the same way on the W3schools example:

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_key_shiftkey

Here is an example:

trying with &, which does not require shift on an azerty

trying with 1, which does require shift on an azerty

So I assume there's something I'm misunderstanding in the way to detect key combinations. Thanks to all those who'll be willing to help.

function logKey(e) {
    var modifier1;
    var modifier2;
    var modifier3;
    var modifier4;
    var display = "";

    if (e.ctrlKey) {
        modifier1 = "ctrl + ";
    }
    else {
        modifier1 = "";
    }
    if (e.altKey) {
        modifier2 = "alt + ";
    }
    else {
        modifier2 = "";
    }
    if (e.shiftKey) {
        modifier3 = "shift + ";
    }
    else {
        modifier3 = "";
    }      
    if (e.metaKey) {
        modifier4 = "meta + ";
    }
    else {
        modifier4 = "";
    }

    display = modifier1 + modifier2 + modifier3 + modifier4 + e.key

    window.alert(display);
}
window.addEventListener('keydown', logKey);

Answer 1

As skyline3000 hinted in their comment, you are probably better off independently tracking which keys are pressed and then when you need them, simply look at what you've tracked.

Something like this:

const input = document.querySelector('input');
const keysDown = [];

input.addEventListener('keydown', e => {
  if (keysDown.indexOf(e.keyCode) === -1) {
    keysDown.push(e.keyCode);
  }
  
  console.log(keysDown);
});

input.addEventListener('keyup', e => {
  const index = keysDown.indexOf(e.keyCode);
  
  if (index !== -1) {
    keysDown.splice(index, 1);
  }
  
  console.log(keysDown, e);
});

Focus on input to register keys:
<input />

This will let you track them way more precisely and can even track lots of keys down at once.

Then, when you want to show which keys they pressed, you just print out your keysDown list.

Answer 2

Very simple solution:

let keys = {};
let keysPressed = '';

document.onkeydown = handleKey;
document.onkeyup = handleKey;

function handleKey(e) {
  // Indicate key pressed
  if (e.type == 'keydown') {
    keys[e.key] = true;
  }
  else {
    keys[e.key] = false;
  }

  // Run on all keys and determine which are pressed
  keysPressed = '';
  for (const [key, value] of Object.entries(keys)) {
    if (value) {
      keysPressed += key;
    }
  }

  // Show key presses
  document.querySelector('.keys').innerHTML = keysPressed;
}

<div class="keys">Press some keys</div>