将光标始终设置在contenteditable div的末尾位置

Question

在我的项目中，我试图将插入符位置始终设置为文本末尾。我知道这是默认行为，但当我们动态添加一些文本时，在Chrome和Firefox中插入符位置会更改为起始点（IE很好，惊人）。有没有办法让它在Chrome和Firefox中正常工作？这里是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();
});

我尝试添加 setStart 和 setEnd，就像这个link中提到的那样，但没有用。

- Mr_Green

---

请查看此链接：https://dev59.com/CXE85IYBdhLWcg3wPBF8 - rahularyansharma

@rahularyansharma 谢谢.. 不过这个好像不起作用。(也许是我做错了什么，因为我对JS不太熟悉)。 - Mr_Green

我也在检查同样的问题。请给我一些时间。 - rahularyansharma

嗯，真的不起作用！！！ - Surendra Jnawali

Answer 1

我在这里找到了解决方案（链接），感谢 Tim down :)。问题在于我正在调用

placeCaretAtEnd($('#result'));

与其

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

如jwarzech在评论中所述。

可用的Fiddle示例

- Mr_Green

---

太好了。我已经寻找这个答案很久了。很高兴终于找到一个可行的解决方案。 - jsbisht

一样的，它可以工作，谢谢！ - RafaSashi

这个代码片段无法正常工作，如果您添加另一个带有文本的嵌套 span 元素，那么光标的焦点将进入嵌套的 span 元素中。 - Daniel Netzer