如何确定可信任DIV中的选择是从左到右还是从右到左 [英] How to determine if a selection in a contenteditable DIV is from left-to-right or from right-to-left

问题描述

在一个令人满意的DIV中，我想确定，如果用户从左到右或从右到左进行选择。有人为浏览器Firefox，Chrome，Safari，Opera提供了Javascript解决方案吗？并且在可能的情况下，还有一个用于IE？

Within a contenteditable DIV, I want to determine, if the user made a selection from left-to-right or from right-to-left. Does someone have a Javascript solution for the Browsers Firefox, Chrome, Safari, Opera? And when possible, also one for IE?

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

我在jsFiddle中准备了代码： http://jsfiddle.net/ecUka/

I prepared the code in jsFiddle here: http://jsfiddle.net/ecUka/

提前感谢： - ）

推荐答案

这是一个使用以下事实的函数：将DOM范围的结尾设置为文档中的较早点而不是范围的开头将崩溃范围。

Here's a function that uses the fact that setting the end of a DOM Range to be at an earlier point in the document than the start of the range will collapse the range.

演示： 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，它不支持与其他浏览器相同的Range和Selection API。

It works in all major browsers except IE < 9, which does not support the same Range and Selection APIs as other browsers.

对于IE< 9，选择API中根本没有任何内容可以告诉您选择方向。我建议的最好的是使用 selectionchange 事件，用于跟踪先前选择的范围，并在每次触发时查看哪一端已更改。它似乎适用于以下示例，但除此之外没有任何测试，因此使用风险自负。

For IE < 9, there is simply nothing in the selection API to tell you about the selection direction. The best I can suggest is using the selectionchange event to keep track of the previously selected range and see which end has changed each time it fires. It seems to work in the following example but has had no testing apart from that, so use at your own risk.

演示： 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;
        }
    }
};

这篇关于如何确定可信任DIV中的选择是从左到右还是从右到左的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！