如何确定是否在CONTENTEDITABLE DIV选择从左侧向右或由右至左(How to dete

在一个CONTENTEDITABLE DIV，我想确定，如果用户从所做的选择从左向右或从右到左。是否有人有对浏览器火狐，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/

提前致谢：-）

下面是一个使用一个事实，即设置一个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;
        }
    }
};