Restore cursor position after changing contenteditable

Question

There is html like this:

<div contenteditable="true" class="value research-form thumbnail">
 Some text here
 </div>

And content of div should dynamicly highlight some words while user types e.g make something like:

 <div contenteditable="true" class="value research-form thumbnail">
 Some text here <span style="background-color: yellow">highlight</div> it
 </div>
 <script>
    $(document).ready(function () {
        var input = $('#textarea').on('input', function (event) {
            var newText = input.text().replace('highlight', '<span style="background-color: yellow">highlight</div>');
            input.html($.parseHTML(newText));
        });
    });
</script>

But there is a problem: when I refresh text in div cursor moves at start of the text in input.

Is there any ways to restore cursor position after changing contenteditable value? Or maybe there is other way to get the same effect?

Try saving cursor position (see http://stackoverflow.com/questions/4767848/get-caret-cursor-position-in-contenteditable-area-containing-html-content) and then setting it back (see http://stackoverflow.com/questions/1181700/set-cursor-position-on-contenteditable-div) after input.html(...). I think you also have other problem here: in your example "highlight" word will be wrapped in a new span each time you edit the text. You probably should replace wrapped words with placeholders before adding new spans, then replace placeholders back. — Qwerty, Oct 01 '14 at 10:52
If you have a solution that meets your expectations you should add it as an answer and select it. http://stackoverflow.com/help/self-answer — Jason Sperske, Jan 27 '16 at 17:10
Back to 2016. I find a nice solution for divs. and publish it here to answer that question: http://stackoverflow.com/a/38479462/1919821 — pery mimon, Jul 20 '16 at 11:38

LazyCat01 · Accepted Answer · 2016-06-11T15:31:20.107

I found the solution.

Here is a complete code:

<div class="container" style="margin-top: 10px">

    <div class="thumbnail value" contenteditable="true">

    </div>

</div>

<script>
    $(document).ready(function () {
        function getCaretCharacterOffsetWithin(element) {
            var caretOffset = 0;
            var doc = element.ownerDocument || element.document;
            var win = doc.defaultView || doc.parentWindow;
            var sel;
            if (typeof win.getSelection != "undefined") {
                sel = win.getSelection();
                if (sel.rangeCount > 0) {
                    var range = win.getSelection().getRangeAt(0);
                    var preCaretRange = range.cloneRange();
                    preCaretRange.selectNodeContents(element);
                    preCaretRange.setEnd(range.endContainer, range.endOffset);
                    caretOffset = preCaretRange.toString().length;
                }
            } else if ((sel = doc.selection) && sel.type != "Control") {
                var textRange = sel.createRange();
                var preCaretTextRange = doc.body.createTextRange();
                preCaretTextRange.moveToElementText(element);
                preCaretTextRange.setEndPoint("EndToEnd", textRange);
                caretOffset = preCaretTextRange.text.length;
            }
            return caretOffset;
        }

        function setCaretPosition(element, offset) {
            var range = document.createRange();
            var sel = window.getSelection();

            //select appropriate node
            var currentNode = null;
            var previousNode = null;

            for (var i = 0; i < element.childNodes.length; i++) {
                //save previous node
                previousNode = currentNode;

                //get current node
                currentNode = element.childNodes[i];
                //if we get span or something else then we should get child node
               while(currentNode.childNodes.length > 0){
                  currentNode = currentNode.childNodes[0];
               }

                //calc offset in current node
                if (previousNode != null) {
                    offset -= previousNode.length;
                }
                //check whether current node has enough length
                if (offset <= currentNode.length) {
                    break;
                }
            }
            //move caret to specified offset
            if (currentNode != null) {
                range.setStart(currentNode, offset);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }

        function onInput(event) {
            var position = getCaretCharacterOffsetWithin(input.get(0));
            var text = input.text();
            text = text.replace(new RegExp('\\btest\\b', 'ig'), '<span style="background-color: yellow">test</span>');
            input.html($.parseHTML(text));
            setCaretPosition(input.get(0), position);
        }

        var input = $('.value').on('input',onInput);

        //content should be updated manually to prevent aditional spaces
        input.html('simple input test example');
        //trigger event
        onInput();
    });
</script>

This is a good solution in your special case: if you disable new lines in your contentedtibales. Otherwise, the script which gets the cursor offset disregards new line entities like
and sets the cursor position in the wrong place (before the
elements). — Mihaly KR, Aug 02 '17 at 21:01
There is also a ces when characters `<` and `>` are entered. It is messing up the whole content. You should probably escape the first with `<` and `>` first. — Slavik Meltser, Oct 06 '20 at 14:07

Restore cursor position after changing contenteditable

1 Answers1

Linked