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

时间:2012-07-31 13:24:30

标签: javascript dom rangy

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

它做得非常出色,但它还没有设计用于以编程方式操作用户输入并且在DIV的innerHTML中替换较短的字符串。

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

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

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

由于

1 个答案:

答案 0 :(得分:2)

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

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

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

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