在绝对位置设置从 A 到 B 的选择范围

Set a selection range from A to B in absolute position

本文关键字：选择 范围 位置 设置      更新时间：2023-09-26

如何以编程方式从 A（x1，y1） 到 B（x2，y2） 进行选择？

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

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

  • 基于标准的方法，由 Firefox 实现>= 20，来自 CSSOM View 规范：document.caretPositionFromPoint()
  • WebKit的专有版本相同：document.caretRangeFromPoint()。
  • IE专有的TextRange对象，它具有获取像素坐标的moveToPoint()方法。但是，似乎在所有版本的IE中使用的moveToPoint()可能会有问题（例如，请参阅此处和此处）;我很幸运，在我使用它的所有文档中都有效。

但是，Mozilla尚未实现其中任何一个，Opera也没有，因此这还不能在这些浏览器中完成。

火狐 20 及更高版本支持 document.caretPositionFromPoint() 。Opera 15 支持document.caretRangeFromPoint()

下面是一些示例代码。它适用于IE 5+，WebKit从2010年左右开始，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();
    }
}

对于 Firefox 或 Opera，有一点解决方法。这会将插入符号设置在元素的第一个位置：

console.log("moz or opera doesn't support caret by position so we have a workaround");
var range = doc.createRange();
var element = doc.elementFromPoint(startX, startY);
range.setStart(element, 0);
相关文章：