JSFiddle - React, Tailwind, and code Playground

by zedsaid

HTML

<div id="editor" contenteditable="true">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra, tellus ut imperdiet tempus, risus quam vestibulum purus, id vestibulum massa leo vitae diam. Mauris posuere, quam vel accumsan vestibulum, felis justo porttitor sapien, auctor semper ligula sapien pellentesque mi. Etiam vestibulum scelerisque luctus. Fusce non ultricies quam. Donec non sagittis tortor, at mollis lectus. Nullam a tellus nisi. Donec dolor est, condimentum sed aliquam ut, elementum at ligula. Vestibulum sed risus dictum, interdum nisl vitae, vulputate elit. Ut condimentum, ante eget convallis aliquam, felis ipsum cursus risus, quis faucibus lacus odio at nunc. Integer diam purus, pulvinar id ullamcorper vel, semper eget nulla. Proin egestas et risus quis tristique.

</div>

CSS

#editor {
    border:1px solid blue;
    height:200px;
    overflow:hidden;
}

JavaScript

function getCaretPosition(editableDiv) {
    var caretPos = 0, containerEl = null, sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            if (range.commonAncestorContainer.parentNode == editableDiv) {
                caretPos = range.endOffset;
            }
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        if (range.parentElement() == editableDiv) {
            var tempEl = document.createElement("span");
            editableDiv.insertBefore(tempEl, editableDiv.firstChild);
            var tempRange = range.duplicate();
            tempRange.moveToElementText(tempEl);
            tempRange.setEndPoint("EndToEnd", range);
            caretPos = tempRange.text.length;
        }
    }
    return caretPos;
}

$('#editor').keyup(function() { 
    alert(getCaretPosition(this));
});