如何确定在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; 
     } 
    } 
};