OLD | NEW |
| (Empty) |
1 <html> | |
2 <head> | |
3 <meta name="viewport" content="width=device-width" /> | |
4 </head> | |
5 <body> | |
6 <form action="about:blank"> | |
7 <input id="input_text" type="text" /> | |
8 <br/> | |
9 </form> | |
10 <form> | |
11 <br/> | |
12 <input id="input_radio" type="radio" style="width:50px;height:50px" /> | |
13 <br/> | |
14 <textarea id="textarea" rows="4" cols="20"></textarea> | |
15 <br/> | |
16 <textarea id="textarea2" rows="4" cols="20" autocomplete="off"></textarea> | |
17 <br/> | |
18 <input id="input_number1" type="number" /><br/><br/> | |
19 <input id="input_number2" type="number" /><br/><br/> | |
20 <p> | |
21 <span id="plain_text">This is Plain Text One</span> | |
22 </p> | |
23 </form> | |
24 | |
25 <!-- We may trigger different sets of events for CONTENTEDITABLE and INPUT /
TEXTAREA --> | |
26 <div id="contenteditable_event" contenteditable><b>ab</b>cd<br><i>ef<b>gh</b
></i></div> | |
27 <form> | |
28 <input id="input_text_event" type="text" /> | |
29 </form> | |
30 | |
31 <script> | |
32 var log = ""; | |
33 var mutationObserver = new MutationObserver(function(mutations) { | |
34 mutations.forEach(function(mutation) { | |
35 addEventLog(mutation.type, mutation.detail); | |
36 }); | |
37 }) | |
38 | |
39 var mutationConfig = { attributes: false, childList: false, chracterData: true }
; | |
40 | |
41 function addEventLog(type, detail) { | |
42 if (log.length > 0) { | |
43 log += ','; | |
44 } | |
45 if (detail == null) { | |
46 log += type; | |
47 } else { | |
48 log += type + '(' + detail + ')'; | |
49 } | |
50 } | |
51 | |
52 function getEventLogs() { | |
53 return log; | |
54 } | |
55 | |
56 function addEventListener(element, event_name) { | |
57 element.addEventListener(event_name, function (e) { addEventLog(event_name, e.
data); }); | |
58 } | |
59 | |
60 function addKeyEventListener(element, event_name) { | |
61 element.addEventListener(event_name, function (e) { addEventLog(event_name, e.
keyCode); }); | |
62 } | |
63 | |
64 function addSelectionEventListener(element, event_name) { | |
65 // Note that listeners added to the element are not effective for now. | |
66 document.addEventListener(event_name, function (e) { addEventLog(event_name, e
.data); }); | |
67 } | |
68 | |
69 function registerListenersAndObserver(element) { | |
70 addKeyEventListener(element, "keydown"); | |
71 addKeyEventListener(element, "keypress"); | |
72 addKeyEventListener(element, "keyup"); | |
73 addEventListener(element, "compositionstart"); | |
74 addEventListener(element, "compositionupdate"); | |
75 addEventListener(element, "compositionend"); | |
76 addEventListener(element, "beforeedit"); | |
77 addEventListener(element, "edit"); | |
78 addEventListener(element, "select"); | |
79 addEventListener(element, "change"); | |
80 addEventListener(element, "input"); | |
81 addSelectionEventListener(element, "selectionchange"); | |
82 mutationObserver.observe(element, mutationConfig); | |
83 } | |
84 | |
85 var contenteditableEvent = document.getElementById("contenteditable_event"); | |
86 var inputTextEvent = document.getElementById("input_text_event"); | |
87 | |
88 registerListenersAndObserver(contenteditableEvent); | |
89 </script> | |
90 | |
91 </body> | |
92 </html> | |
OLD | NEW |