javascript - 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()Rangy 范围的方法获取其文本，从该文本中删除空白并测量其长度。演示：

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