Javascript 文本范围到插入符号位置答案

【问题标题】：Javascript text range up to caret positionJavascript 文本范围到插入符号位置
【发布时间】：2012-10-17 09:04:44
【问题描述】：

我正在使用 IE 8，我想在 contenteditable div 中创建一个文本范围，该范围应包括插入符号位置之前的所有文本（我在 editableDiv 中知道）。到目前为止，我能够选择 div 中的所有文本：

 function myFunction(editableDiv, cursorPosition)
 {
    if (document.selection) {
       var range = document.body.createTextRange();
        range.moveToElementText(editableDiv);            
        range.collapse(false);
        range.select();
    }
 }

<div id="myDiv" runat="server" contenteditable="true">

但是如何创建一个从 div 中的第一个字符开始并持续到插入符号位置的文本范围？非常感谢。

【问题讨论】：

你的editableDiv中除了文本节点还有其他节点吗？跨度，字体重量标签等？如果没有，您可以使用选择对象中第一个范围的 endOffset 属性。
插入符号位置如何表示？
cursorPosition 是一个整数，用于跟踪在插入符号之前找到的字符数（它不考虑 html 元素，而只考虑 div 中插入符号之前的 innerText 长度）。跨度>
@Asad 是的，我的 editableDiv 中有跨度。

标签： javascript html contenteditable caret textrange

【解决方案1】：

使用TextRange的setEndPoint()方法：

var caretRange = document.selection.createRange();
var preCaretRange = document.body.createTextRange();
preCaretRange.moveToElementText(editableDiv);
preCaretRange.setEndPoint("EndToStart", caretRange);

显然您需要为非 IE 浏览器使用不同的代码。

【讨论】：

var caretRange = document.selection.createRange();这是否应该从光标位置开始创建一个文本范围？或者我如何使用 cursorPosition？谢谢！
我明白你的意思，但我的问题是，当我调用函数时，editableDiv 内没有光标，实际上我需要它在我添加到 editableDiv 内的跨度之后放置插入符号.我的版本总是将插入符号放在末尾，但我需要在插入的跨度之后放置插入符号，这可以在任何地方。
@Crista23：如果您希望范围在跨度之后结束，您可以使用moveToElementText() 和setEndPoint() 的不同组合。
感谢您的回答！我这样做了，我没有收到任何错误，但是似乎我的跨度在内容可编辑 div 中被选中并且被聚焦。此外，插入符号不会出现在 div 中，就像在 image 中一样。我能做些什么来防止这种情况发生吗？
实际上我通过将范围末尾移动 1 个字符来解决问题。非常感谢，您的回答对我帮助很大！我还找到了您的另一篇帖子here，它非常有帮助！非常感谢！