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

Question

我正在使用contenteditable在javascript中使用实时语法荧光笔.在解析内容时,我提取div的文本并使用正则表达式模式来正确设置样式.然后我将div的innerHtml设置为已解析的内容.但是,这会使光标从屏幕上消失.

我创建了这个函数来重置光标,它在Firefox中工作正常.但是在Chrome中,光标以一种半可预测的奇怪方式移动.它通常设置在文档中的第一个空格中,而不是在解析之前的位置.

存储在变量cc中的插入符号char应该位于它应该存在的位置.

/**
* 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...

Answer 1

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