<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p>
      <input type="text" id="demo" placeholder="type some key">
    </p>
    <p>
      <textarea id="area" rows="10" cols="25"></textarea>
    </p>
    
  <script>
  var input = document.getElementById('demo');
  var area = document.getElementById('area');
  input.onkeydown = handle;

  var lastTime = Date.now();

  function handle(e) {
    var text = ' keyCode=' + e.keyCode + "\n";
  
    if (area.value && Date.now() - lastTime > 250) {
      area.value += new Array(81).join('-') + '\n';
    }
    lastTime = Date.now();
  
    area.value += text;
  
    area.scrollTop = area.scrollHeight;
  
    if (form.elements[e.type + 'Stop'].checked) {
      e.preventDefault();
    }
  }
</script>
</body>
</html>