Javascript/jQuery 在可编辑的 DIV 中设置光标答案

【问题标题】：Javascript/jQuery set cursor in editable DIVJavascript/jQuery 在可编辑的 DIV 中设置光标
【发布时间】：2012-08-23 20:35:35
【问题描述】：

查看了一些移动光标的方法，似乎无法提出一种优雅/有效的方式。

我基本上是想调用一行代码来做下面的伪代码。

获取可编辑 div 中的文本长度
将光标设置到最后一个字母

例如

这是示例文本|

光标设置在哪里 |是

这有多简单？

JsFiddle：http://jsfiddle.net/v8agZ/5/

谢谢

【问题讨论】：

您可以使用此链接获得答案：stackoverflow.com/questions/2442460/…

标签： javascript jquery html cursor contenteditable

【解决方案1】：

这是一种将光标置于可编辑div（改编自this question）末尾的方法。

HTML

<div id="mydiv">
    Lorem ipsum dolor sit amet,
    <br />
    <br />
    consectetur adipisicing elit
</div>

Javascript

function setCursorToEnd(ele) {
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(ele, ele.childNodes.length - 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    ele.focus();
}

var mydiv = document.getElementById("mydiv");
setCursorToEnd(mydiv);

如果你想使用 jQuery（在这种情况下没用），你可以简单地使用 $() 和 get() 方法获取 mydiv 元素，如下所示：

var mydiv = $("#mydiv").get(0);
setCursorToEnd(mydiv);

【讨论】：

【解决方案2】：

我觉得你可以用jCaret plugin

Demo，不是我的

【讨论】：