JSFiddle - React, Tailwind, and code Playground

by khiemnguyen

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
    </style>
</head>

<body>
    <div contenteditable="true" style="width: 400px; height: 100px; border: 1px solid black" id="editable"><span
                style="color: blueviolet; font-size: large; padding: 5px;">mention</span> text text text<br><br>123
        <b>123</b>text text text
    </div>
    how to caret at outside before span
    <br>
    <button id="button" onclick="setCaret()">focus</button>
</body>

<script>
    function setCaret() {
        var el = document.getElementById("editable");
        var range = document.createRange();
        var sel = window.getSelection();
        range.setStart(el, 0);
        range.setEnd(el.childNodes[0], 0);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
        el.focus();
    }
</script>

</html>