Rangy在替换innerHTML时恢复光标位置

Question

我正在使用Rangy来选择和恢复光标位置。

它做得很好，但它并不是为以编程方式操作用户输入和在DIV的innerHTML中替换较短的字符串而设计的。

我在jsbin上创建了一个示例，展示了当用户在选择的末尾键入一个空格，并且该空格被以编程方式剥离时会发生什么：http://jsbin.com/ebeqoj/4/edit

被替换的innerHTML比Rangy试图恢复的要短，所以它失败了，DIV失去了焦点。

我希望能就如何处理这个问题提出建议。例如，有没有一种方法可以指示Rangy恢复新字符串末尾的光标？(我尝试过使用rangy.getSelection().move("character", userInput2.length-1)，但没有成功)

谢谢

Answer 1

将插入符号放在<div>内容的末尾非常简单：

var sel = rangy.getSelection();
sel.selectAllChildren(el);
sel.collapseToEnd();

对于更一般的情况，您可以创建一个从<div>开头到插入符号位置包含内容的范围，使用范围范围的text()方法获取文本，删除文本中的空白并测量其长度。演示：

http://jsbin.com/ebeqoj/5/edit