JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<input id="a" type="text" placeholder="press ctrl">
<pre><code id="debug"></code></pre>

CSS

#debug {
  color:navy;
}
.db1 {
  color:red;
}

JavaScript

document.getElementById('a').addEventListener('keydown', (e) => {
  const states = {
    alt: e.altKey,
    ctrl: e.ctrlKey,
    meta: e.metaKey,
    shift: e.shiftKey,
  };
  const key = e.key;
  const code = e.code;
  document.getElementById("debug").innerHTML=`keydown key: ${key}, code: <div class="db1">${code}</div>  <br/> <br/> ${JSON.stringify(states)}`;
});