Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the Document</title> <style> #keyInput { font-size: 100%; box-sizing: border-box; width: 90%; border: 1px solid green; } #area { width: 90%; box-sizing: border-box; height: 250px; border: 1px solid green; display: block; } form label { display: inline; white-space: nowrap; } </style> </head> <body> <form id="form" onsubmit="return false"> <p>Focus on the input field and press a key.</p> <input type="text" placeholder="Press keys here" id="keyInput"> <textarea id="area"></textarea> <input type="button" value="Clear textarea" onclick="area.value = ''" /> <div> Prevent default for: <label> <input type="checkbox" name="keydownStop" value="1"> keydown</label> <label> <input type="checkbox" name="keyupStop" value="1"> keyup</label> <p> Ignore: <label> <input type="checkbox" name="keydownIgnore" value="1"> keydown</label> <label> <input type="checkbox" name="keyupIgnore" value="1"> keyup</label> </p> </div> </form> <script> keyInput.onkeydown = keyInput.onkeyup = keyInput.onkeypress = handle; let lastTime = Date.now(); function handle(e) { if(form.elements[e.type + 'Ignore'].checked) return; 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; if(form.elements[e.type + 'Stop'].checked) { e.preventDefault(); } } </script> </body> </html>