如何確定在contenteditable DIV中的選擇是從左到右還是從右到左

Question

在contenteditable DIV中，我想確定用戶是從左到右還是從左到右從右到左。有人對瀏覽器Firefox，Chrome，Safari，Opera有Javascript解決方案嗎？如果可能的話，還有一個用於IE？

<div id="editor" contenteditable> 
Selection from Cursor end | here <strong>over bold</strong> to Cursor start | here. 
</div> 

我編寫的代碼的jsfiddle這裏：http://jsfiddle.net/ecUka/

感謝的提前:-)

Answer 1

下面是一個使用一個事實，即設定一個DOM範圍的結束是在更早的功能在文檔中指向比範圍的開始將會縮小範圍。

演示：http://jsfiddle.net/97MDR/17/

代碼：

function isSelectionBackwards() { 
    var backwards = false; 
    if (window.getSelection) { 
     var sel = window.getSelection(); 
     if (!sel.isCollapsed) { 
      var range = document.createRange(); 
      range.setStart(sel.anchorNode, sel.anchorOffset); 
      range.setEnd(sel.focusNode, sel.focusOffset); 
      backwards = range.collapsed; 
     } 
    } 
    return backwards; 
} 

它適用於所有的主流瀏覽器除了IE以外< 9，它不支持同樣範圍和選擇的API爲其他瀏覽器。

對於IE < 9，選擇API中沒有任何內容可以告訴您有關選擇方向。我可以建議的最好的方法是使用selectionchange事件跟蹤之前選定的範圍，並查看每次觸發哪個端點發生了變化。它似乎在下面的例子中工作，但除此之外沒有任何測試，所以使用時需要您自擔風險。

演示：http://jsfiddle.net/97MDR/18/

附加代碼：

var selectedRange, selectionBackwards; 

document.onselectionchange = function(evt) { 
    evt = evt || window.event; 
    var sel = document.selection; 
    if (sel && sel.type !== "Control") { 
     if (sel.type == "Text") { 
      // Selection is not collapsed, so compare range end points 
      var newRange = sel.createRange(); 
      if (selectedRange) { 
       var startChanged = (newRange.compareEndPoints("StartToStart", selectedRange) != 0); 
       var endChanged = (newRange.compareEndPoints("EndToEnd", selectedRange) != 0); 

       if (startChanged && !endChanged) { 
        selectionBackwards = true; 
       } else if (endChanged && !startChanged) { 
        selectionBackwards = false; 
       } else if (startChanged && endChanged) { 
        // Both ends have changed, which is confusing. 
        // I suspect this can happen when the selection snaps 
        // to words. In this case we can tell nothing, so leave 
        // selectionBackwards alone. 
       } else { 
        // Neither end has changed, so we can tell nothing. 
       } 
      } 

      selectedRange = newRange; 
     } else { 
      // Selection is collapsed 
      selectionBackwards = false; 
     } 
    } 
};