inputs.html (1885B)
1 <html> 2 <head> 3 <meta charset="utf-8" /> 4 <title>Inputs</title> 5 <script> 6 class CustomTextBox extends HTMLElement { 7 constructor() { 8 super(); 9 10 this.attachShadow({ mode: "open" }); 11 const wrapper = document.createElement("span"); 12 this.textbox = wrapper.appendChild(document.createElement("input")); 13 this.textbox.value = "adipisci"; 14 this.shadowRoot.append(wrapper); 15 } 16 17 focus() { 18 this.textbox.focus(); 19 } 20 21 select() { 22 this.textbox.select(); 23 } 24 25 setSelectionRange(start, end) { 26 this.textbox.setSelectionRange(start, end); 27 } 28 29 get selectionStart() { 30 return this.textbox.selectionStart; 31 } 32 33 get selectionEnd() { 34 return this.textbox.selectionEnd; 35 } 36 37 get value() { 38 return this.textbox.value; 39 } 40 } 41 customElements.define("x-input", CustomTextBox); 42 </script> 43 </head> 44 <body> 45 <div id="text">lorem</div> 46 <input type="text" id="input" value="ipsum" /> 47 <textarea id="textarea">dolor</textarea> 48 <div id="contenteditable" contenteditable="true">sit</div> 49 <iframe id="iframe" src="selectionAction_frame.html"></iframe> 50 <iframe id="designmode" src="selectionAction_frame.html"></iframe> 51 <iframe 52 id="iframe-xorigin" 53 src="http://127.0.0.1:4245/assets/www/selectionAction_frame_xorigin.html" 54 ></iframe> 55 <x-input id="x-input"></x-input> 56 </body> 57 <script> 58 addEventListener("load", function () { 59 document.getElementById("iframe").contentDocument.body.textContent = 60 "amet"; 61 var designmode = document.getElementById("designmode"); 62 designmode.contentDocument.body.textContent = "consectetur"; 63 designmode.contentDocument.designMode = "on"; 64 }); 65 </script> 66 </html>