Set the caret position always to end in contenteditable div

Question

In my project, I am trying to set the caret position always to the end of the text. I know this is default behaviour but when we add some text dynamically, then the caret position changes to starting point in Chrome and firefox (IE is fine, amazing).

Anyway to make it to work properly in chrome and firefox?

Here is the fiddle

<div id="result" contenteditable="true"></div>
<button class="click">click to add text</butto>

var result = $('#result');
$('.click').click(function () {
    var preHtml = result.html();
    result.html(preHtml + "hello");
    result.focus();
});

I tried adding setStart and setEnd as mentioned in this link but no use.

http://stackoverflow.com/questions/2871081/jquery-setting-cursor-position-in-contenteditable-div please check this . — rahularyansharma, Apr 26 '13 at 07:23
@rahularyansharma Thanks.. this is not working though. (maybe I am doing something wrong as I am poor in JS). — Mr_Green, Apr 26 '13 at 07:29

score 22 · Accepted Answer · edited May 23 '17 at 12:09

22

I got the solution here thanks to Tim down :). The problem was that I was calling

placeCaretAtEnd($('#result'));

Instead of

placeCaretAtEnd(($('#result').get(0));

as mentioned by jwarzech in the comments.

Working Fiddle

edited May 23 '17 at 12:09

Community

1
1

answered Apr 26 '13 at 09:14

Mr_Green

40,727
45
159
271

Too good. Was looking for this for quite a while. Glad to find a working solution. – jsbisht Nov 12 '15 at 07:23
same here, it works, thanks! – RafaSashi Mar 09 '17 at 12:32
1

this fiddle isn't working if you add another nested span with text, the focus of the caret will go into the nested span. – Daniel Netzer Feb 27 '18 at 09:29

Set the caret position always to end in contenteditable div

1 Answers1

Linked