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 using the following JavaScript:

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);

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()

Below a live demo that prints the key on the page:

Non-printable keys like SHIFT and CTRL are also detected, however, you would have to do a specific detection for those in order to assign a message to display when those are pressed.

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

Note: To the best of our knowledge, the information above and the snippet are accurate and up to date. However, in case you notice something wrong, please report snippet or leave a comment below.
Back to Snippets

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

Scroll to Top