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

【问题标题】：Rangy - restore cursor position when replacing innerHTMLRangy - 替换 innerHTML 时恢复光标位置
【发布时间】：2012-07-29 06:45:03
【问题描述】：

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

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

我在 jsbin 上创建了一个示例，展示了当用户在选择结束时键入空格并以编程方式去除空格时会发生什么： http://jsbin.com/ebeqoj/4/edit

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

我很感激有关如何处理此问题的建议。例如，有没有办法指示 Rangy 在新字符串的末尾恢复光标？（我试过使用rangy.getSelection().move("character", userInput2.length-1)没有成功）

谢谢

【问题讨论】：

【解决方案1】：

将插入符号放在<div> 内容的末尾很容易：

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

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

【讨论】：