keyboard-event-cap.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script>
  5. 'use strict';
  6. const keys = [
  7. // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
  8. // without deprecated / non-standard
  9. "altKey", "code", "ctrlKey", "isComposing", "key", "locale", "location", "metaKey",
  10. "repeat", "shiftKey"
  11. ]
  12. let output_list = [];
  13. let last_timestamp = Date.now();
  14. function select_keys(obj, keys) {
  15. let new_obj = {}
  16. for (let k in event)
  17. if (keys.indexOf(k) != -1)
  18. new_obj[k] = event[k];
  19. return new_obj
  20. }
  21. let key_handler_builder = (event_type) => (event) => {
  22. if (event["target"].id != "input")
  23. return;
  24. let cur_timestamp = Date.now();
  25. let output = {
  26. "event_type": event_type,
  27. "event": select_keys(event, keys),
  28. "latency": cur_timestamp - last_timestamp // Time to wait before firing event
  29. }
  30. last_timestamp = cur_timestamp;
  31. output_list.push(output);
  32. let to_print = JSON.stringify(
  33. output_list,
  34. undefined,
  35. 2);
  36. document.getElementById("outputs").innerText = to_print;
  37. }
  38. document.addEventListener('keydown', key_handler_builder('keydown'), false);
  39. document.addEventListener('keyup', key_handler_builder('keyup'), false);
  40. document.addEventListener('keypress', key_handler_builder('keypress'), false);
  41. document.addEventListener('compositionstart', key_handler_builder('compositionstart'), false);
  42. document.addEventListener('compositionend', key_handler_builder('compositionend'), false);
  43. document.addEventListener('compositionupdate', key_handler_builder('compositionupdate'), false);
  44. window.onload = (e) => {
  45. document.getElementById("input").focus();
  46. }
  47. </script>
  48. </head>
  49. <body>
  50. <input id="input" />
  51. <h2>Key Down</h2>
  52. <p id="outputs" style="white-space: pre;" />
  53. </body>
  54. </html>