blob: 7bf86c82dfd2e2dcace79086efee1896cfb7cc5d (
plain)
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
|
<html>
<head>
<meta charset="utf-8">
<title>Inputs</title>
<script>
class CustomTextBox extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
const wrapper = document.createElement('span');
this.textbox = wrapper.appendChild(document.createElement("input"));
this.textbox.value = "adipisci";
this.shadowRoot.append(wrapper);
}
focus() {
this.textbox.focus();
}
select() {
this.textbox.select();
}
setSelectionRange(start, end) {
this.textbox.setSelectionRange(start, end);
}
get selectionStart() {
return this.textbox.selectionStart;
}
get selectionEnd() {
return this.textbox.selectionEnd;
}
get value() {
return this.textbox.value;
}
}
customElements.define('x-input', CustomTextBox);
</script>
</head>
<body>
<div id="text">lorem</div>
<input type="text" id="input" value="ipsum">
<textarea id="textarea">dolor</textarea>
<div id="contenteditable" contenteditable="true">sit</div>
<iframe id="iframe" src="selectionAction_frame.html"></iframe>
<iframe id="designmode" src="selectionAction_frame.html"></iframe>
<x-input id="x-input"></x-input>
</body>
<script>
addEventListener("load", function() {
document.getElementById("iframe").contentDocument.body.textContent = "amet";
var designmode = document.getElementById("designmode");
designmode.contentDocument.body.textContent = "consectetur";
designmode.contentDocument.designMode = "on";
});
</script>
</html>
|
