<!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>
