使用javascript检测选择结束位置

Question

我编写了一个代码来检测使用javascript的选择结束,并在最终位置放置一个标记.看到这个jsfiddle:http://jsfiddle.net/vCwwN/

上面的代码执行以下操作:

• 它正确处理所有LTR脚本(例如英语)(正确显示标记).
• 对于LTR脚本(例如英语)它处理选择是向前(从左/上到右/下)还是向后(从右/下到左/上)正确显示选择停止的标记(使用鼠标或键盘) .
• 它用于getClientRects查找所有选择矩形边界,以及用于检测选择方向的黑客(如果向后或不向后).根据这两个信息,它将标记放在末尾.

您可以尝试选择上面描述的英文脚本,没有任何问题.唯一的问题是,当你试图处理RTL脚本(如阿拉伯语),则该标记显示在所选择的RTL脚本的开始,而不是结束(其中鼠标/键盘实际上停止).这些导致问题:

• 在RTL脚本(阿拉伯语)中开始选择,并在RTL脚本(阿拉伯语)中结束选择.这显示了选择开始时的标记.
• 在LTR脚本(英语)中开始选择,并在RTL(阿拉伯语)脚本中结束选择.这将在RTL脚本选择开始时显示标记(而不是结束).

基本上,从任何地方开始的选择(LTR或RTL)和以RTL脚本结束是不正确的.任何其他情况都得到了正确处理(例如,从LTR或RTL开始,以LTR结束,甚至在途中通过RTL脚本).

问题是RTL脚本的流向是翻转的,因此向后是向前,向前是向后.这就是为什么我的代码无法正确处理RTL并且后向黑客被逆转的原因.

我想到的一个解决方案是检测选择的最后一个字符,看看它是否有RTL脚本,然后根据这个翻转后退标志.我已经放置了一个函数来检测文本是否以RTL字符结尾(它与未使用的jsfiddle相同).它可能会帮助你,帮我解决它:)

Answer 1

看看这是否是朝着正确方向迈出的一步。

它利用以下代码从Tim Down发布的用户选择中返回 HTML：

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}

定义后，您可以调用lastCharTRL您定义的方法来检查最后一个字符是否为 RTL 并采取相应的操作。

if (lastCharRTL(getSelectionHtml()))
    $('#pointer').css({top: rects[n].top + 10, left: rects[n].left - 10}).show();
else if(backwards)
    $('#pointer').css({top: rects[0].top + 10, left: rects[0].left - 10}).show();
else
    $('#pointer').css({top: rects[n].top + 10, left: rects[n].right}).show();

演示版