keystroke-times.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <textarea id="key" style="width:100%;height:50%"></textarea>
  <p>Last keystroke took <span id="time">0</span>ms</p>
  <p>Longest keystroke was <span id="longest">0</span>ms</p>
  <script>
    let k = document.getElementById("key");
    let t = document.getElementById("time");
    let l = document.getElementById("longest");
    let y = 0;
    let x = 0;
    k.addEventListener("keydown", (e) => {
      x = e.timeStamp;
    });
    k.addEventListener("keyup", (e) => {
      let z = e.timeStamp - x;
      if (z > y) y = z;
      t.innerText = Math.round(z);
      l.innerText = Math.round(y);
    });
  </script>
</body>

</html>