<script> window.onload = () => { // For emulating the traditional behavior, collapse Selection to end of the // <body> (at the text node after the <input>). getSelection().collapse(document.body, document.body.childNodes.length); document.execCommand("insertHorizontalRule"); getSelection().collapse( document.querySelector("b") ); document.execCommand("forwardDelete"); } function onFocusChangeOfInput() { document.getSelection().setPosition(document.querySelector("pre")); } </script> <pre> <time contenteditable>a|</t> <input onfocus="onFocusChangeOfInput()" autofocus onblur="onFocusChangeOfInput()">