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

我在写入文本时增加了文本，例如，语法突出显示通过围绕kewords跨度，在contentediatable领域。重置光标在内容编辑后的位置在dom更改后可编辑

我有一个常见的问题，即游标向contenteditable的开头跳跃。我试过Nico Burns在Set cursor position on 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); 
      } 
     }

引人注目：

该范围被保存像它应该在鼠标点击（在参考了最里面的元素光标是，以正确的偏移），但如果它保存在keydown上（比参考contenteditable本身，startOffset总是0，无论光标位于何处）
如果我阻止将光标保存在keydown上，并使用mouseup来保存它被保存的范围，就像它从未正确保存或更改一样：引用contenteditable本身，startOffset始终为0.所以我想知道range对象是否正在改变，例如，反映DOM的变化？

来源

2011-06-13 JanD

回到2016年我找到一个很好的解决方案，并发布它来回答这个问题：http://stackoverflow.com/a/38479462/1919821 – 2016-07-20 11:30:47

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

如果你对DOM做了很大的改变，我会建议使用不同的方法，例如我的Rangy库中的选择save/restore module所使用的方法，即在DOM中插入临时不可见标记元素选择的开始和结束。

来源

2011-06-13 11:11:43

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

回答

相关问题