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 stackoverflow.com/questions/4715762/… — EvilEpidemic
– EvilEpidemic, Commented Jul 25, 2013 at 8:37
@EvilEpidemic That one is for textarea and does not help in correctly for contenteditable, however I ll have closer look. Thanks. — ʞɹᴉʞ ǝʌɐp
– ʞɹᴉʞ ǝʌɐp, Commented Jul 25, 2013 at 8: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
– ʞɹᴉʞ ǝʌɐp, Commented Jul 25, 2013 at 8:45

Khawer Zeshan · Accepted Answer · 2013-07-25 08:56:16Z

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'?

Tim Down · Accepted Answer · 2013-07-25 10:14:14Z

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); } });

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related