Use JavaScript to Detect What Key the User Pressed

In some apps and games it may be necessary to enable certain functionality when the user presses a certain key or key combination on their keyboard. You can do this in a cross-browser fashion in modern browsers using the following JavaScript:

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

Below a live demo that prints the key 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.