How to place cursor at the end of text after replacing HTML with jQuery?

Question

I have a contenteditable div and trying to replace <font> tag with <span> tag but after replacing the html using jQuery replaceWith() function cursor defaults to the beginning of the text however I want it at the end of the replacing html.

Here is the DEMO to reproduce the issue. Let me know if there is any problem reproducing the issue.

Here is demo code gist

<div id="test" contenteditable=true>
  <p> <font color="blue">Text to be replaced</font> </p>
</div>
<a id="replace" href="javascript:void(null);">replace</a>

JS code

$('#test').focus();
$('#replace').on({
  mousedown: function (event) {
    event.preventDefault();
  },
  click: function () {
    $('#test').find('font').replaceWith(function () {
      return '<span style="color:red">' + 'New Text' + '</span>'
    });
  }
});

EDIT: Here the problem may sound duplicate but it is indeed different as you see the content gets replaced. I might be replacing the part of that text selected by user and not the entire text. So I need to place the cursor at the end of the html which is replacing the original html.

possible duplicate of http://stackoverflow.com/questions/4715762/javascript-move-caret-to-last-character — EvilEpidemic, Jul 25 '13 at 08:37
[This answer](http://stackoverflow.com/a/1867393/240443) might help (how to set cursor to a position). — Amadan, Jul 25 '13 at 08:38
@EvilEpidemic That one is for textarea and does not help in correctly for contenteditable, however I ll have closer look. Thanks. — ʞɹᴉʞ ǝʌɐp, Jul 25 '13 at 08:41
Here the problem may sound duplicate but it is indeed different as you see the content gets replaced. I might be replacing the part of that text selected by user and not the entire text. So I need to place the cursor at the end of the html which is replacing the original html. — ʞɹᴉʞ ǝʌɐp, Jul 25 '13 at 08:45

score 8 · Answer 1 · answered Jul 25 '13 at 08:56

You can use this function

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

call it as follows

placeCaretAtEnd( document.getElementById("content") );

EXAMPLE

Thank you! After hours of trying with different solutions, this is the only one that worked! However, I am using this to highlight text with a different color once it goes past X number of characters. Issue is, as I keep typing, I can see all the text refreshing and that creates a blinking effect. Any way to void that 'lag'? — Darth Coder, Jul 19 '17 at 15:52

score 0 · Answer 2 · answered Jul 25 '13 at 10:14

If you create the <span> element by hand using document.createElement() and keep a reference to it, you can easily place the caret immediately after it.

Demo: http://jsfiddle.net/Gaqfs/10/

Code:

function placeCaretAfter(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.setStartAfter(el);
        range.collapse(true);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

$('#test').focus();
$('#replace').on({
    mousedown: function (event) {
        event.preventDefault();
    },
    click: function () {
        var span = document.createElement("span");
        span.style.color = "red";
        span.innerHTML = "New Text";
        $('#test').find('font').replaceWith(span);
        placeCaretAfter(span);
    }
});

How to place cursor at the end of text after replacing HTML with jQuery?

2 Answers2

Linked