javascript - 选择对象在 Chrome contentEditable 元素中表现异常

Question

我正在使用 contenteditable 在 javascript 中开发实时语法荧光笔。解析内容时，我提取 div 的文本并使用正则表达式模式对其进行适当的样式设置。然后我将div的innerHtml设置为解析后的内容。但是，这会使光标从屏幕上消失。

我创建了这个函数来重置光标，它在 Firefox 中运行良好。但在 Chrome 中，光标以一种半可预测的奇怪方式移动。它通常设置在文档中的第一个空格字符处，而不是在解析之前它所在的位置。

存储在变量 cc 中的脱字符位于它应该在的位置。

/**
* Put cursor back to its original position after every parsing, and
* insert whitespace to match indentation level of the line above this one.
*/
findString : function()
{
    cc = '\u2009'; // carret char

    if ( self.find(cc) )
    {
        var selection = window.getSelection();
        var range = selection.getRangeAt(0);

        if ( this.do_indent && this.indent_level.length > 0 )
        {
            var newTextNode = document.createTextNode(this.indent_level);
            range.insertNode(newTextNode);
            range.setStartAfter(newTextNode);

            this.do_indent = false;
        }

        selection.removeAllRanges();
        selection.addRange(range);
    }
}

关于调用这些函数的一些事实:

• 当我取消注释切换 innerHtml 内容的代码时，光标通常会移动到文档的末尾。
• 如果我取消对 findString() 调用方的注释，则解析已完成，但光标会消失，直到我将焦点放回 div 中。
• 如果我取消对这两行的注释，则 div 的行为与预期的一样，当然，解析除外。

是什么导致 Chrome 在 Firefox 中运行时出现这种错误行为？

编辑:更多信息

我在 window.getSelection() 上做一些日志记录，并注意到在比较 Chrome 和 Firefox 时它包含不同的信息。这使得脚本的行为正常，但参数是错误的。

真正奇怪的是，当我将 window.getSelection() 记录为 key 处理程序脚本的第一个操作时，它的行为如下:

• 没有任何修改，我得到了“错误”的对象。
• 在 console.log() 指令下设置断点后，脚本暂停并且日志显示“正确”的对象，这正是我想要的方式。

记录器:

console.log(window.getSelection());
// Do keyhandling stuff...

Answer 1

尝试制作原始范围的副本并将其添加到函数末尾的选择而不是原始范围，因为范围可以有动态边界，你最终会设置回一个“错误”的范围.