將插入/光標位置設置爲一個可滿足的div的末尾

對於一個可滿足的div，爲了解決一些FireFox特定的問題。我不得不在div的末尾添加一個br標籤。將插入/光標位置設置爲一個可滿足的div的末尾

<div id="testDiv" contentEditable="true"> 
Hey, click the button then hit space.<br>  
</div>

這實際上是谷歌plus如何處理他們的contentEditable div邏輯與他們的用戶標記。

現在的問題是，在Firefox中將光標移動到div的末尾意味着插入符號在
標記和命中空間移動到下一行之後。

您可以在此處測試該行爲：jsFiddle，方法是單擊按空格鍵的按鈕。

我用下面的代碼插入符號移動到範圍的最後一個位置：

function placeCaretAtEnd(el) { 
      el.focus(); 
      if (window.getSelection){ 
       if (typeof window.getSelection != "undefined" 
         && typeof document.createRange != "undefined") { 
        var range = document.createRange(); 
        range.selectNodeContents(el); 
        range.collapse(false); 
        var sel = window.getSelection(); 
        sel.removeAllRanges(); 
        sel.addRange(range); 
       } else if (typeof document.body.createTextRange != "undefined") { 
        var textRange = document.body.createTextRange(); 
        textRange.moveToElementText(el); 
        textRange.collapse(false); 
        textRange.select(); 
       } 
      } 
     }

有沒有可能改變這種代碼忽略了BR標籤或代替移動光標位置立即在br標籤之前？

來源

2013-08-05 mstef

那麼問題是什麼？如果我在沒有'
'標籤的Firefox和Chrome中運行該小提琴，則可以獲得相同的功能，但是我在使用br標籤時注意到了不同之處。 –

我可以更新小提琴，但在處理可編輯元素中的不可編輯html元素時，
標記非常必要。例如，如果我在可編輯的項目中有一個輸入，它不會使用退格一致地刪除，並且我將無法在元素之後的末尾集中注意力。 – mstef

不知道這是否會幫助其他人。這不適用於跨瀏覽器，但是由於我的問題是針對FireFox的，以及它如何處理BR標籤的範圍/選擇，這似乎解決了我的問題。

我基本上只是設置的範圍末端的BR前

range.setEndBefore($(el).find('br')[0]);

所以在我的功能，我這樣做只適用於Firefox：

function placeCaretAtEnd(el) { 
        el.focus(); 
        if (window.getSelection){ 
         if (typeof window.getSelection != "undefined" 
           && typeof document.createRange != "undefined") { 
          var range = document.createRange(); 
          range.selectNodeContents(el); 
          range.collapse(false); 
          if ($('#browser-version-check').val() == 'firefox') { 
           range.setEndBefore($(el).find('br')[0]); 
          } 
          var sel = window.getSelection(); 
          sel.removeAllRanges(); 
          sel.addRange(range); 
         } else if (typeof document.body.createTextRange != "undefined") { 
          var textRange = document.body.createTextRange(); 
          textRange.moveToElementText(el); 
          textRange.collapse(false); 
          textRange.select(); 
         } 
        } 
       }

這裏是一個更新的jsfiddle http://jsfiddle.net/mstefanko/fG5kJ/2/ ，沒有包含瀏覽器檢查，所以這個演示只能在FireFox中正常工作

來源

2013-08-05 23:42:57 mstef

將插入/光標位置設置爲一個可滿足的div的末尾

回答

相關問題