Source code
Revision control
Copy as Markdown
Other Tools
<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"
></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>