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

reset cursor position in content editable after dom change

本文关键字：位置 光标 编辑 dom      更新时间：2023-09-26

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

我有一个常见的问题，即光标向contenteditable的开头跳跃。我尝试了Nico Burns关于在contentEditable<div>它在示例中起作用，但不适用于我的代码，可能是因为我更改了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的保存方式与鼠标单击时的保存方式相同（参考光标所在的最内部元素，具有正确的偏移量），但如果它是在向下键时保存的（而不是参考可编辑内容本身，startOffset始终为0，无论光标在何处）
  • 如果我阻止光标在keydown时保存，而只是使用mouseup来保存它被重新吸收的范围，就像它从未被正确保存或它被更改一样：引用内容可编辑本身，startOffset始终为0。所以我想知道range对象是否在变化，例如反映DOM中的变化

Ranges确实会对DOM中的更改做出反应，并且有规则对此进行管理。未指定影响选定范围的更改是否反映在选择中，浏览器行为也会有所不同。

如果您正在对DOM进行重大更改，我建议使用不同的方法，例如我的Rangy库中的选择保存/恢复模块所使用的方法，即在选择的开始和结束时在DOM中插入临时的不可见标记元素。

相关文章：