Set the caret position always to end in contenteditable div [duplicate]

问题

This question already has answers here:

How to move cursor to end of contenteditable entity (6 answers)

contenteditable, set caret at the end of the text (cross-browser) (3 answers)

Closed 5 years ago.

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.

回答1:

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

来源：https://stackoverflow.com/questions/16230720/set-the-caret-position-always-to-end-in-contenteditable-div