How can i check if a combination of keys pressed in JavaScript

Question

I am writing a program where I want to be adding custom hotkeys and store these. The combination must be input by the user. Let's say user selects CTRL + M. How do I store this combination and give an alert message whenever this combination is pressed in Vanilla JS.

Answer 1

You can use keydown event to detect the keyboard events also check for Ctrl key using event.ctrlKey in the event handler.

update I added radio buttons to show how you can have it dynamically use the combination using keydown event and you can also store it in database and display it like this in your front-end:

document.addEventListener('keydown', logKey);

function logKey(e) {
  let command = document.querySelector('input[name="command"]:checked').value;
  let keypressed = document.querySelector('input[name="keypressed"]:checked').value;
  if (e.keyCode == keypressed && e[command]) alert(` ${command} + ${String.fromCharCode(e.keyCode)} pressed`);
  e.preventDefault();
  return false;
}

<label><input type="radio" name="command" value="shiftKey" checked /> Shift<label><br />
<label><input type="radio" name="command" value="ctrlKey" /> Ctrl<label><br />

<label><input type="radio" name="command" value="altKey" /> Alt<label>

<hr />

<label><input type="radio" name="keypressed" value="77" checked /> M<label><br />
<label><input type="radio" name="keypressed" value="68" /> D<label><br />
<label><input type="radio" name="keypressed" value="83" /> S<label>


<p>Focus the IFrame first (e.g. by clicking in it), then try pressing selected keys.</p>
<p id="log"></p>