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的行为正如人们期望的那样，当然，除了解析之外。

在Firefox中使用Chrome时导致这种不当行为的原因是什么？

编辑：更多信息

我正在对window.getSelection（）进行一些登录，并注意到它在比较Chrome和Firefox时包含不同的信息。这使得脚本的行为与它应该的一样，但是有一个错误的参数。

真正奇怪的是，当我将window.getSelection（）记录为keyhandler脚本的第一个动作时，它的行为如下：

没有任何修改我得到了“错误”的对象。
在console.log（）指令下设置断点，脚本暂停，日志显示“正确”对象，就像我想要的那样。

记录器：

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

Answer 1

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

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

1 个答案: