JSFiddle - React, Tailwind, and code Playground

by Zer00ne Null

HTML

<div id="editable" contenteditable="true">
  text text text text text<br>text text text<br>text text text<br>text text text text text text
</div>
<input id='inp1' name="inp1" /><input id="inp2" name="inp2" />
<button id="button" onclick="setCaret()">focus</button>

CSS

input { width: 5ex; text-align: center; padding: 1px 3px;}

JavaScript

function setCaret() {
    var el = document.getElementById("editable");
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(el.childNodes[6],9);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    el.focus();
}