1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
<!DOCTYPE html>
<!-- Note: if this page gets long (or wide) enough that it can't fit entirely on
the phone's display without scrolling, the test will start being flaky and
it will be very difficult to debug :(. -->
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<form action="about:blank">
<input id="input_text" type="text" size="10">
</form>
<div id="contenteditable_none" contenteditable inputMode="none"></div>
<div id="contenteditable_text" contenteditable inputMode="text"></div>
<div id="contenteditable_tel" contenteditable inputMode="tel"></div>
<div id="contenteditable_url" contenteditable inputMode="url"></div>
<div id="contenteditable_email" contenteditable inputMode="email"></div>
<div id="contenteditable_numeric" contenteditable inputMode="numeric"></div>
<div id="contenteditable_decimal" contenteditable inputMode="decimal"></div>
<div id="contenteditable_search" contenteditable inputMode="search"></div>
<input type="password" inputMode="numeric" id="input_numeric_password" />
</body>
<script>
var selectionChangeEventLog = "";
var otherEventLog = "";
var mutationObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
addEventLog(mutation.type, mutation.detail);
});
})
var mutationConfig = { attributes: false, childList: false, characterData: true };
function addOtherEventLog(type, detail) {
if (otherEventLog.length > 0) {
otherEventLog += ',';
}
if (detail == null) {
otherEventLog += type;
} else {
otherEventLog += type + '(' + detail + ')';
}
}
function addSelectionChangeEventLog(type, detail) {
if (selectionChangeEventLog.length > 0) {
selectionChangeEventLog += ',';
}
if (detail == null) {
selectionChangeEventLog += type;
} else {
selectionChangeEventLog += type + '(' + detail + ')';
}
}
// selectionchange event is queued, so it races with the other events.
// crbug.com/628964
function getEventLogs() {
if (otherEventLog.length > 0 && selectionChangeEventLog.length > 0)
return otherEventLog + ',' + selectionChangeEventLog;
return otherEventLog + selectionChangeEventLog;
}
function clearEventLogs() {
selectionChangeEventLog = '';
otherEventLog = '';
}
function addEventListener(element, event_name) {
element.addEventListener(event_name, function (e) { addOtherEventLog(event_name, e.data); });
}
function addKeyEventListener(element, event_name) {
element.addEventListener(event_name, function (e) { addOtherEventLog(event_name, e.keyCode); });
}
function addSelectionEventListener(event_name) {
// Note that listeners added to the element are not effective for now.
document.addEventListener(event_name, function (e) { addSelectionChangeEventLog(event_name, e.data); });
}
function registerListenersAndObserver(element) {
addKeyEventListener(element, "keydown");
addKeyEventListener(element, "keypress");
addKeyEventListener(element, "keyup");
addEventListener(element, "compositionstart");
addEventListener(element, "compositionupdate");
addEventListener(element, "compositionend");
addEventListener(element, "beforeedit");
addEventListener(element, "edit");
addEventListener(element, "select");
addEventListener(element, "change");
addEventListener(element, "input");
mutationObserver.observe(element, mutationConfig);
}
var inputText = document.getElementById("input_text");
// SelectionEventListener should be outside registerListenersAndObserver() to avoid duplication.
addSelectionEventListener("selectionchange");
registerListenersAndObserver(inputText);
</script>
</html>
|
