Источник:
https://learn.javascript.ru/keyboard-events
https://plnkr.co/edit/L6Q1Ov7NmtHDUNt6
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>#area {
width: 95%;
box-sizing: border-box;
height: 250px;
border: 1px solid black;
display: block;
}</style>
</head>
<body>
<form id="form" onsubmit="return false">
<textarea id="area" readonly></textarea>
<input type="button" value="Очистить" onclick="area.value = ''" />
</form>
<script>const element = document.documentElement;
element.onkeydown = element.onkeyup = element.onkeypress = handle;
let lastTime = Date.now();
function handle(e) {
let text = e.type +
' key=' + e.key +
' code=' + e.code +
(e.shiftKey ? ' shiftKey' : '') +
(e.ctrlKey ? ' ctrlKey' : '') +
(e.altKey ? ' altKey' : '') +
(e.metaKey ? ' metaKey' : '') +
(e.repeat ? ' (repeat)' : '') +
"\n";
if (area.value && Date.now() - lastTime > 250) {
area.value += new Array(81).join('-') + '\n';
}
lastTime = Date.now();
area.value += text;
}</script>
</body>
</html>