选择对象在 Chrome contentEditable 元素中表现异常答案

【问题标题】：Selection object behaving strange in Chrome contentEditable element选择对象在 Chrome contentEditable 元素中表现异常
【发布时间】：2010-02-09 17:40:36
【问题描述】：

我正在使用 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() 作为 keyhandler 脚本的第一个操作时，它的行为如下：

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

记录器：

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

【问题讨论】：

我对这个问题感到困惑。试图在文本中找到这个“\u2009”字符的目的是什么？ findString 到底应该做什么，它是怎么做到的？我认为这里没有足够的信息来重现问题。
应用程序的代码比我可以在这里发布的要多得多，但基本上流程是这样的：用户输入一些东西，它被 keyHandler() 捕获，它根据键决定做什么被按下。如果它是“突出显示键”，则调用 syntaxHighlight()。该函数在当前位置插入“\u2009”并将 div 的内容发送到 split()，它使用“\u2009”字符作为中间位置来获取一段代码以突出显示不超过 8000 个字符长。然后对内容进行解析和替换。此后 findString() 重置光标。
第一：你试过setTimeout(func, 0)吗？您永远不知道...其次，您可能需要发布重现问题的代码缩减版。

标签： javascript firefox google-chrome range

【解决方案1】：

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

【讨论】：