-
Notifications
You must be signed in to change notification settings - Fork 0
/
editing-host-autocomplete-sample.html
174 lines (168 loc) · 9.76 KB
/
editing-host-autocomplete-sample.html
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html>
<head>
<style>
div, textarea, input[type='text'] {
border: 2px solid black;
width: 100%;
}
</style>
</head>
<body>
Div with contenteditable:
<br/>
<div contenteditable='true'></div>
<br/>
Div with EditContext:
<br/>
<div></div>
<br/>
Textarea:
<br/>
<textarea placeholder='Enter some text'></textarea>
<br/>
Input type text:
<br/>
<input placeholder='Enter some text' name='name' />
<br/>
Input type text in a form:
<br/>
<form>
<input placeholder='Enter some text' name='name' />
</form>
<script>
let div1 = document.querySelector('div');
div1.addEventListener('compositionstart', (e) => {
document.body.append('div1 composition start fired', document.createElement('br'));
document.body.append('div1 composition start data ' + e.data, document.createElement('br'));
});
div1.addEventListener('compositionupdate', (e) => {
document.body.append('div1 composition update fired', document.createElement('br'));
document.body.append('div1 composition update data ' + e.data, document.createElement('br'));
});
div1.addEventListener('compositionend', (e) => {
document.body.append('div1 composition end fired', document.createElement('br'));
document.body.append('div1 composition end data ' + e.data, document.createElement('br'));
});
div1.addEventListener('beforeinput', (e) => {
document.body.append('div1 before input fired', document.createElement('br'));
document.body.append('div1 before input data ' + e.data, document.createElement('br'));
});
div1.addEventListener('input', (e) => {
document.body.append('div1 input fired', document.createElement('br'));
document.body.append('div1 input data ' + e.data, document.createElement('br'));
});
let div2 = document.querySelectorAll('div')[1];
div2.editContext = new EditContext();
div2.editContext.addEventListener('compositionstart', (e) => {
document.body.append('div2 composition start fired', document.createElement('br'));
document.body.append('div2 composition start data ' + e.data, document.createElement('br'));
});
div2.editContext.addEventListener('compositionupdate', (e) => {
document.body.append('div2 composition update fired', document.createElement('br'));
document.body.append('div2 composition update data ' + e.data, document.createElement('br'));
});
div2.editContext.addEventListener('compositionend', (e) => {
document.body.append('div2 composition end fired', document.createElement('br'));
document.body.append('div2 composition end data ' + e.data, document.createElement('br'));
});
div2.addEventListener('beforeinput', (e) => {
document.body.append('div2 before input fired', document.createElement('br'));
document.body.append('div2 before input data ' + e.data, document.createElement('br'));
if (e.inputType === 'insertReplacementText') {
// for spellcheck, autocomplete, etc.
let text = e.dataTransfer.getData('text');
let range = e.getTargetRanges()[0];
div2.firstChild.replaceData(range.startOffset, range.endOffset, text);
let selection = window.getSelection();
selection.removeAllRanges();
selection.setBaseAndExtent(div2.firstChild, range.startOffset + text.length, div2.firstChild, range.startOffset + text.length);
}
});
div2.addEventListener('input', (e) => {
document.body.append('div2 input fired', document.createElement('br'));
document.body.append('div2 input data ' + e.data, document.createElement('br'));
});
div2.editContext.addEventListener('textupdate', (e) => {
document.body.append('div2 text update fired', document.createElement('br'));
document.body.append('div2 text update text ' + e.text, document.createElement('br'));
if (!div2.firstChild) {
div2.append(document.createTextNode(''));
}
div2.firstChild.replaceData(e.updateRangeStart, e.updateRangeEnd, e.text.replace(/ /g,'\u00a0'));
let selection = window.getSelection();
selection.removeAllRanges();
selection.setBaseAndExtent(div2.firstChild, e.selectionStart, div2.firstChild, e.selectionEnd);
});
div2.editContext.addEventListener('textformatupdate', (e) => {
document.body.append('div2 text format update fired', document.createElement('br'));
});
div2.editContext.addEventListener('characterboundsupdate', (e) => {
document.body.append('div2 character bounds update fired', document.createElement('br'));
});
let textarea = document.querySelector('textarea');
textarea.addEventListener('compositionstart', (e) => {
document.body.append('textarea composition start fired', document.createElement('br'));
document.body.append('textarea composition start data ' + e.data, document.createElement('br'));
});
textarea.addEventListener('compositionupdate', (e) => {
document.body.append('textarea composition update fired', document.createElement('br'));
document.body.append('textarea composition update data ' + e.data, document.createElement('br'));
});
textarea.addEventListener('compositionend', (e) => {
document.body.append('textarea composition end fired', document.createElement('br'));
document.body.append('textarea composition end data ' + e.data, document.createElement('br'));
});
textarea.addEventListener('beforeinput', (e) => {
document.body.append('textarea before input fired', document.createElement('br'));
document.body.append('textarea before input data ' + e.data, document.createElement('br'));
});
textarea.addEventListener('input', (e) => {
document.body.append('textarea input fired', document.createElement('br'));
document.body.append('textarea input data ' + e.data, document.createElement('br'));
});
let input1 = document.querySelector('input');
input1.addEventListener('compositionstart', (e) => {
document.body.append('input1 composition start fired', document.createElement('br'));
document.body.append('input1 composition start data ' + e.data, document.createElement('br'));
});
input1.addEventListener('compositionupdate', (e) => {
document.body.append('input1 composition update fired', document.createElement('br'));
document.body.append('input1 composition update data ' + e.data, document.createElement('br'));
});
input1.addEventListener('compositionend', (e) => {
document.body.append('input1 composition end fired', document.createElement('br'));
document.body.append('input1 composition end data ' + e.data, document.createElement('br'));
});
input1.addEventListener('beforeinput', (e) => {
document.body.append('input1 before input fired', document.createElement('br'));
document.body.append('input1 before input data ' + e.data, document.createElement('br'));
});
input1.addEventListener('input', (e) => {
document.body.append('input1 input fired', document.createElement('br'));
document.body.append('input1 input data ' + e.data, document.createElement('br'));
});
let input2 = document.querySelectorAll('input')[1];
input2.addEventListener('compositionstart', (e) => {
document.body.append('input2 composition start fired', document.createElement('br'));
document.body.append('input2 composition start data ' + e.data, document.createElement('br'));
});
input2.addEventListener('compositionupdate', (e) => {
document.body.append('input2 composition update fired', document.createElement('br'));
document.body.append('input2 composition update data ' + e.data, document.createElement('br'));
});
input2.addEventListener('compositionend', (e) => {
document.body.append('input2 composition end fired', document.createElement('br'));
document.body.append('input2 composition end data ' + e.data, document.createElement('br'));
});
input2.addEventListener('beforeinput', (e) => {
document.body.append('input2 before input fired', document.createElement('br'));
document.body.append('input2 before input data ' + e.data, document.createElement('br'));
});
input2.addEventListener('input', (e) => {
document.body.append('input2 input fired', document.createElement('br'));
document.body.append('input2 input data ' + e.data, document.createElement('br'));
});
</script>
</body>
</html>