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