How to use JavaScript to Detect What Key the User Pressed

In many apps, especially games or interactive tools, you may need to trigger certain actions when the user presses a key or a combination of keys. Modern browsers make this easy to handle with JavaScript, and you can do it in a cross-browser way with just a few lines of code.

Here’s how:

window.addEventListener('keydown', function (e) {
  document.querySelector('p').innerHTML = `You pressed ${e.key}`;
}, false);Code language: JavaScript (javascript)

Here’s a live demo that prints the key pressed on the page:

If you want deeper browser support that goes back to pre-IE9, you would have to use the keypress event (which is now deprecated) in a snippet like this:

function doWhichKey(e) { 
  e = e || window.event; 
  let charCode = e.keyCode || e.which; 
  return String.fromCharCode(charCode); 
} 

window.addEventListener('keypress', function (e) { 
  console.log("You pressed " + doWhichKey(e));
}, false);Code language: JavaScript (javascript)

Here’s a brief breakdown of the code:

• The doWhichKey() function includes some code for older browsers like old IE
• The function returns a character code for the key that was pressed (e.g. the letter J is represented by “74”; the spacebar by “32”, and so on)
• The event listener logs the code, which has been converted to its literal value using String.fromCharCode()

💡 The website keycode.info allows you to see the keycode for any key.