javascript - Rangy - 替换innerHTML时恢复光标位置

Question

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

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

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

替换后的innerHTML 比Rangy 尝试恢复的innerHTML 短，因此失败并且DIV 失去焦点。

我希望得到有关如何处理此问题的建议。例如，有没有办法指示 Rangy 将光标恢复到新字符串的末尾？ (我尝试使用 rangy.getSelection().move("character", userInput2.length-1) 但没有成功)

谢谢

Answer 1

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

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

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

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