selection-modify-line-from-contenteditable-to-textarea.html (743B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"> 4 <style> 5 :first-child { 6 display: table-header-group; 7 margin-right: 10px; 8 } 9 </style> 10 <script> 11 "use strict"; 12 13 addEventListener("DOMContentLoaded", () => { 14 const editingHost = document.querySelector("span[contenteditable]"); 15 getSelection().collapse(editingHost, 0); 16 editingHost.blur(); 17 }); 18 19 function onfocusout() { 20 const selection = getSelection(); 21 const range = selection.getRangeAt(0); 22 selection.modify("move", "left", "line"); 23 selection.addRange(range); 24 document.execCommand("hiliteColor", false, "#5343B4"); 25 } 26 </script> 27 <body> 28 <canvas> width="7"></canvas> 29 <textarea>AAA</textarea> 30 <fieldset onfocusout="onfocusout()"> 31 <span contenteditable> 32 </span> 33 </fieldset> 34 </body> 35 </html>