[英]Set a selection range from A to B in absolute position
How can I select programmatically from A(x1,y1) to B(x2,y2) ? 如何从A(x1,y1)到B(x2,y2)以编程方式选择?
x1, y1, x2, y2 are pixel coordinates. x1,y1,x2,y2是像素坐标。 I searched a lot and in all functions I found, we had to specify a specific tag and then it selects its content.
我搜索了很多,在我发现的所有功能中,我们必须指定一个特定的标签,然后选择它的内容。
You can do this in current versions of all browsers. 您可以在所有浏览器的当前版本中执行此操作。 These browsers have at least one of the following:
这些浏览器至少具有以下之一:
document.caretPositionFromPoint()
document.caretPositionFromPoint()
document.caretRangeFromPoint()
. document.caretRangeFromPoint()
。 TextRange
object, which has a moveToPoint()
method that takes pixel coordinates. TextRange
对象,它有一个采用像素坐标的moveToPoint()
方法。 However, it seems that moveToPoint()
, which is used in all version of IE, can be buggy (see here and here , for example); moveToPoint()
可能都是错误的(例如,见这里和这里 ); I've simply been lucky that has worked in all the documents I've used it in.
However, Mozilla does not yet implement any of these and neither does Opera, so this can't be done in those browsers yet.
但是,Mozilla尚未实现其中任何一项,Opera也没有实现,因此在这些浏览器中尚无法实现。
Firefox 20 and later supports document.caretPositionFromPoint()
. Firefox 20及更高版本支持
document.caretPositionFromPoint()
。 Opera 15 supports document.caretRangeFromPoint()
Opera 15支持
document.caretRangeFromPoint()
Here's some example code. 这是一些示例代码。 It works in IE 5+, WebKit from around 2010 onwards, Firefox >= 20 and Opera >= 15.
它适用于IE 5 +,WebKit从2010年左右开始,Firefox> = 20,Opera> = 15。
Live demo: http://jsfiddle.net/timdown/ABjQP/ 现场演示: http : //jsfiddle.net/timdown/ABjQP/
Code: 码:
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();
}
}
For Firefox or Opera there is a little workaround. 对于Firefox或Opera,有一些解决方法。 This set the caret at the first position of an element:
这将插入符号设置在元素的第一个位置:
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.