如何将插入符号设置为可满足的Range对象的最后一个字符？

Question

我很难弄清楚如何根据Range对象中的最后一个字符设置插入位置。

例如，我有满足感，但有一些文字。

Hello world Test

然后我用鼠标突出显示部分文字（“wor”）：

然后mouseup事件将获得选定的范围。

焦点消失后，所选的高光将消失。

现在，我的目标是将插入符号设置为“r”和“l”之间，如下图所示（范围结束）

到目前为止，我得到了选择和恢复部分工作，但无法找出基于Range对象的插入符设置。

代码：

var node = this.element.find(".reContentArea")[0];
var range = document.createRange();

var sel = window.getSelection();

sel.removeAllRanges();
sel.addRange(range);

Answer 1

您可以使用focusOffset获取选择结束的字符位置：

$('.reContentArea').on('mouseup', function() {
    var offset= window.getSelection().focusOffset 
})

在contenteditable element设置插入位置时，我们可以使用setStart(startNode, startOffset)。正如您在此方法中所看到的，我们需要在该节点中指定节点和偏移量。

var editable = $('.reContentArea')[0],
    range = document.createRange(),
    sel = window.getSelection();    

range.setStart(editable.firstChild, offset);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);

我不清楚甚至你想要触发“设置插入符号”的内容，但我已经使用此解决方案在此jsfiddle上创建了一个简单的点击事件。

Answer 2

我建议使用这个很棒的插件

https://github.com/acdvorak/jquery.caret

// Select everything after the 6th character
$('input').range(6);
$('textarea').val('Hello\nWorld').range(6).range().text === 'World';

在这里查看演示：

http://www.examplet.org/jquery/caret.php