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

Question

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

x1,y1,x2,y2是像素坐标.我搜索了很多,在我发现的所有功能中,我们必须指定一个特定的标签,然后选择它的内容.

Answer 1

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

• 基于标准的方法,由Firefox> = 20实现,来自CSSOM View规范: document.caretPositionFromPoint()
• WebKit的专有版本相同:document.caretRangeFromPoint().
• IE的专有TextRange对象,它有一个moveToPoint()采用像素坐标的方法.但是,似乎moveToPoint()在所有版本的IE中都使用了它,可能是错误的(例如,请参见此处和此处); 我很幸运,曾经使用过我用过的所有文件.

但是,Mozilla尚未实现其中任何一项,Opera也没有实现,因此在这些浏览器中尚无法实现.

Firefox 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();
    }
}