重置光標在內容編輯後的位置在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更改後可編輯

回答

相關問題