在 dom 更改后重置可编辑内容中的光标位置答案

【问题标题】：reset cursor position in content editable after dom change在 dom 更改后重置可编辑内容中的光标位置
【发布时间】：2023-03-26 17:23:02
【问题描述】：

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

我有一个常见的问题是光标跳向 contenteditable 的开头。我在Set cursor position on contentEditable <div> 上尝试了 Nico Burns 的解决方案，它在示例中有效，但不适用于我的代码，可能是因为我更改了 contenteditable 本身内部的 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);
            }
        }

引人注目：

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

【问题讨论】：

回到 2016 年。我找到了一个不错的解决方案并发布它来回答这个问题：stackoverflow.com/a/38479462/1919821

标签： javascript events dom range

【解决方案1】：

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

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

【讨论】：