Click in here
<br>
and press a key.
html {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #FFCC80;
  text-align: center;
  font-family: monospace;
  line-height: 1.4;
  font-size: 25px;
}
pre {
  text-align: left;
}
View Compiled
document.addEventListener("keydown", function(event) {
  
  console.log(event);
    
  document.body.innerHTML = `
    &nbsp;&nbsp;&nbsp;
    <b>which: ${event.which}</b>
    <br>&nbsp;
    <b>keyCode:</b> ${event.keyCode}
    <br>&nbsp;&nbsp;&nbsp;
    <b>shiftKey:</b> ${event.shiftKey}
    </br>&nbsp;&nbsp;&nbsp;&nbsp;
    <b>altKey:</b> ${event.altKey}
    <br>&nbsp;&nbsp;&nbsp;
    <b>ctrlKey:</b> ${event.ctrlKey}
    <br>&nbsp;&nbsp;
    <b>metaKey:</b> ${event.metaKey}
    <br>&nbsp;&nbsp;
    <b>key:</b> ${event.key}
  `;
  
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.