<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()">