使用父元素中的javascript计算用户选择的开始和结束位置

Calculate the start and end position of user selection using javascript from a parent element

本文关键字：选择 开始 位置 结束 用户 javascript 元素 计算      更新时间：2023-09-26

我正在寻找一种方法来计算用户从已知父元素中选择的开始和结束位置。我在FF工作时遇到了一些轻微的修改，但我不确定如何在IE中做到这一点，如果我的修改合适，我很想得到一些想法。非常感谢Tim Down给出的原始答案。

function getBodyTextOffset(node, offset) {
    var sel = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(document.getElementById('test'));
    range.setEnd(node, offset);
    sel.removeAllRanges();
    sel.addRange(range);
    return sel.toString().length;
}
function getSelectionOffsets() {
    var sel, range;
    var start = 0, end = 0;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(sel.rangeCount - 1);
            start = getBodyTextOffset(range.startContainer, range.startOffset);
            end = getBodyTextOffset(range.endContainer, range.endOffset);
            sel.removeAllRanges();
            sel.addRange(range);
            alert(start + ", " + end);
        }
    } else if (document.selection) {
        // IE stuff here
    }
    return {
        start: start,
        end: end
    };
}

我知道这已经有一段时间了，但这里有一个JSFiddle展示了这个想法。同样，它适用于FF和Chrome，但不适用于IE9。理想情况下，我希望能够从元素测试开始就获得偏移量。

JavaScript范围是一个痛苦的话题，尽管这里有一些好的资源。。。

以下是一些可以作为参考的演示。。。

http://dylanschiemann.com/articles/dom2Range/dom2RangeExamples.html

一个模糊但体面的起点，以了解哪些方法和属性可用。。。http://help.dottoro.com/ljxsqnoi.php

您可以使用以下JavaScript来发现包含什么。。。

for (i in window.getSelection()) {alert('i = '+i);}

当您看到提到的对象时，您可以将其附加，只需确保您知道也要为方法使用括号，并且在极少数情况下使用参数，如下面的参数。。。

for (i in window.getSelection().getRangeAt(0)) {alert('i = '+i);}

此外，Gecko浏览器（如Firefox）中还有一个非常严重的范围错误，如果你将鼠标稍微移到一个元素之外，但不到字母/字符的50%，那么Gecko会错误地将边界元素设置为该元素，即使它没有被选中。只是想弄清楚它是什么，Mozilla实际上拒绝修复它（就像他们处理了许多其他错误一样），这是我发布的错误帖子的链接。。。

https://bugzilla.mozilla.org/show_bug.cgi?id=696571

希望这能让你朝着正确的方向前进。

相关文章：