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

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

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 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
Disqus Comments Loading...

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