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 = `
<b>which: ${event.which}</b>
<br>
<b>keyCode:</b> ${event.keyCode}
<br>
<b>shiftKey:</b> ${event.shiftKey}
</br>
<b>altKey:</b> ${event.altKey}
<br>
<b>ctrlKey:</b> ${event.ctrlKey}
<br>
<b>metaKey:</b> ${event.metaKey}
<br>
<b>key:</b> ${event.key}
`;
});
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.