javascript - 以绝对位置设置从 A 到 B 的选择范围

Question

如何以编程方式从 A(x1,y1) 到 B(x2,y2) 进行选择？

x1, y1, x2, y2 是像素坐标。我搜索了很多，在我找到的所有函数中，我们必须指定一个特定的标签，然后它选择它的内容。

Answer 1

您可以在所有浏览器的当前版本中执行此操作。这些浏览器至少具有以下一项:

• 基于标准的方法，由 >= 20 的 Firefox 实现，来自 CSSOM View 规范:document.caretPositionFromPoint()
• WebKit 的专有版本:document.caretRangeFromPoint()。
• IE 的专有 TextRange 对象，它有一个 moveToPoint()获取像素坐标的方法。但是，所有版本的 IE 中都使用的 moveToPoint() 似乎有问题(例如，参见 here 和 here)；我只是很幸运，在我用过它的所有文档中都发挥了作用。

但是，Mozilla 和 Opera 都没有实现这些，所以这些浏览器还不能实现。

Firefox 20 and later supports document.caretPositionFromPoint() . Opera 15 支持 document.caretRangeFromPoint()

这是一些示例代码。它适用于 IE 5+、2010 年左右的 WebKit、Firefox >= 20 和 Opera >= 15。

现场演示:http://jsfiddle.net/timdown/ABjQP/

代码:

function createSelectionFromPoint(startX, startY, endX, endY) {
    var doc = document;
    var start, end, range = null;
    if (typeof doc.caretPositionFromPoint != "undefined") {
        start = doc.caretPositionFromPoint(startX, startY);
        end = doc.caretPositionFromPoint(endX, endY);
        range = doc.createRange();
        range.setStart(start.offsetNode, start.offset);
        range.setEnd(end.offsetNode, end.offset);
    } else if (typeof doc.caretRangeFromPoint != "undefined") {
        start = doc.caretRangeFromPoint(startX, startY);
        end = doc.caretRangeFromPoint(endX, endY);
        range = doc.createRange();
        range.setStart(start.startContainer, start.startOffset);
        range.setEnd(end.startContainer, end.startOffset);
    }
    if (range !== null && typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof doc.body.createTextRange != "undefined") {
        range = doc.body.createTextRange();
        range.moveToPoint(startX, startY);
        var endRange = range.duplicate();
        endRange.moveToPoint(endX, endY);
        range.setEndPoint("EndToEnd", endRange);
        range.select();
    }
}