blob: 554c6c8143aad7f2759b259bee6c024992f69679 (
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
62
63
64
65
66
|
<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>
<iframe
id="iframe-xorigin"
src="http://127.0.0.1:4245/assets/www/selectionAction_frame_xorigin.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>
|
