Question

我在编写文本时对其进行扩充，例如语法突出显示通过围绕kewords的跨度，在一个contentediatable字段中。

我有一个常见的问题，即光标跳到了可疑的开头。我尝试了Nico Burns在Set cursor position on contentEditable <div>上的解决方案，它在示例中起作用，但不适用于我的代码，可能是因为我在可信任的内部更改了DOM。

完整代码：http://pastie.org/2060277

output.addEventListener('keyup',augmentInput,false);
        output.addEventListener('keydown',saveCursorPos,false);
        output.addEventListener('mousedown',saveCursorPos,false);
        output.addEventListener('keyup',restoreCursorPos,false);

        function saveCursorPos(e){
            //var selection = window.getSelection();
            savedRange = window.getSelection().getRangeAt(0);
            console.log("save "+e.type,savedRange);
        }

        function restoreCursorPos(e){
        document.getElementById("output").focus();

            if (savedRange != null) {
                var s = window.getSelection();

                if (s.rangeCount > 0){
                    s.removeAllRanges();
                }

                s.addRange(savedRange);
                console.log("range !=0 "+e.type, savedRange);
            }

            else {
                window.getSelection().addRange(savedRange);
                console.log("range ==0 "+e.type, savedRange);
            }
        }

引人注目：

保存范围就像在鼠标单击时一样保存（参考光标所在的最内层元素，具有正确的偏移量），但如果它保存在keydown上则不会保存（与参考contenteditable本身相比，startOffset始终为0 ，无论光标在哪里）
如果我阻止光标保存在keydown上并且只是使用mouseup来保存范围，那么它就会被恢复，就像它从未正确保存或更改一样：引用contenteditable本身，startOffset始终为0.所以我想知道是否范围对象正在改变，例如反映DOM的变化？

Answer 1

范围会对DOM中的更改做出反应，并且rules governing this。是否指定了影响所选范围的更改是否反映在选择中，并且浏览器行为会有所不同。

如果您对DOM进行了重大更改，我建议您使用其他方法，例如我save/restore module库中的选择Rangy使用的方法，即临时插入在选择的开始和结束时DOM中的不可见标记元素。

在dom更改后，可以在内容中重置光标位置

1 个答案: