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.