在Chrome內容中表現奇怪的選擇對象可編輯元素

我正在使用contenteditable在JavaScript中使用實時語法突出顯示。解析內容時，我提取div的文本並使用正則表達式來正確地設置它的樣式。然後，我將div的innerHtml設置爲解析的內容。但是，這會使光標從屏幕上消失。在Chrome內容中表現奇怪的選擇對象可編輯元素

我已經創建了此函數來重置光標，並且它在Firefox中正常工作。但是在Chrome瀏覽器中，光標正在以一種半可預測的奇妙方式移動。它通常設置爲文檔中的第一個空格字符，而不是解析之前的位置。

存儲在變量cc中的脫字符字符位於它應該在的位置。

/** 
* Put cursor back to its original position after every parsing, and 
* insert whitespace to match indentation level of the line above this one. 
*/ 
findString : function() 
{ 
    cc = '\u2009'; // carret char 

    if (self.find(cc)) 
    { 
     var selection = window.getSelection(); 
     var range = selection.getRangeAt(0); 

     if (this.do_indent && this.indent_level.length > 0) 
     { 
      var newTextNode = document.createTextNode(this.indent_level); 
      range.insertNode(newTextNode); 
      range.setStartAfter(newTextNode); 

      this.do_indent = false; 
     } 

     selection.removeAllRanges(); 
     selection.addRange(range); 
    } 
}

約調用這些函數的一些事實：

當我取消切換的innerHTML內容光標通常移動到文檔的末尾，而不是代碼。
如果我取消註釋findString（）調用者，解析完成，但光標消失，直到我把焦點放回div。
如果我取消兩條線的註釋，那麼div的行爲就像人們期望的那樣，除了當然，用於解析。

什麼是導致這種在Chrome瀏覽器中的不正當行爲，而它在Firefox的作品？

編輯：更多信息

我正在做一些記錄上window.getSelection（），並發現它比較Chrome和Firefox時，包含不同的信息。這使得劇本的行爲恰如其分，但是這種說法是錯誤的。

真正奇怪的是，當我登錄window.getSelection（）作爲keyhandler腳本的第一個動作，它的行爲是這樣的：

沒有任何修飾，我得到了「錯誤」的對象。
在console.log（）指令下設置了斷點後，腳本暫停，並且日誌顯示「正確」對象，就像我想要的那樣。

記錄器：

console.log(window.getSelection()); 
// Do keyhandling stuff...

來源

2010-02-09 Christoffer

我很困惑這個問題。試圖在文本中找到這個「\」字符的目的是什麼？ 'findString'究竟應該做什麼，它沒有做到這一點？我認爲這裏沒有足夠的信息來重新解決問題。 – 2010-02-15 01:34:32

應用程序比我可以在這裏發佈的代碼多得多，但基本上流程如下所示：用戶鍵入一些內容，它由keyHandler（）捕獲，它根據所按的鍵確定要執行的操作。如果它是「高亮鍵」，則調用syntaxHighlight（）。該函數在當前位置插入「\ u2009」，並將div的內容發送到使用「\ u2009」字符作爲中間位置的split（），以獲得一段代碼以突出顯示不超過8000個字符長。然後解析並替換內容。此後findString（）重置遊標。 – Christoffer 2010-02-15 07:11:31

第一：你嘗試過'setTimeout（func，0）'嗎？你永遠不會知道......其次，你可能需要發佈一個可以重現你的問題的代碼。 – Hemlock 2011-09-13 02:44:21

儘量使原始範圍的副本，並將其添加到選擇而不是原來的範圍在函數結束時，由於該範圍可以有動態的邊界，你最終會回到一個「錯誤的」。

來源

2011-12-13 22:19:50

在Chrome內容中表現奇怪的選擇對象可編輯元素

回答

相關問題