Javascript 浏览器页面中选定文本的坐标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6846230/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Coordinates of selected text in browser page
提问by Bouke
I need the coordinates in pixels of the beginning of the text selection (anywhere on the page, not in a textarea).
我需要文本选择开头的像素坐标（页面上的任何位置，而不是文本区域中）。
I tried using the cursor coordinates but this didn't work quite well because the cursor coordinates and the beginning of the selection are not always the same (for example when a user drags over a text).
我尝试使用光标坐标，但效果不佳，因为光标坐标和选择的开头并不总是相同（例如，当用户拖动文本时）。
I hope someone has the solution!
我希望有人有解决方案！
回答by Tim Down
In IE >= 9 and non-IE browsers (Firefox 4+, WebKit browsers released since early 2009, Opera 11, maybe earlier), you can use the getClientRects()method of Range. In IE 4 - 10, you can use the boundingLeftand boundingTopproperties of the TextRangethat can be extracted from the selection. Here's a function that will do what you want in recent browsers.
在IE> = 9和非IE浏览器（Firefox 4+，WebKit浏览器自2009年年初发布，歌剧11，也许更早），你可以使用getClientRects()的方法Range。在 IE 4 - 10 中，您可以使用可以从选择中提取的boundingLeft和boundingTop属性TextRange。这是一个功能，可以在最近的浏览器中执行您想要的操作。
Note that there are some situations in which you may wrongly get co-ordinates 0, 0, as mentioned in the comments by @Louis. In that case you'll have to fall back to a workaround of temporarily inserting an element and getting its position.
请注意，在某些情况下，您可能会错误地获得坐标0, 0，如@Louis 的评论中所述。在这种情况下，您将不得不退回到临时插入元素并获取其位置的解决方法。
jsFiddle: http://jsfiddle.net/NFJ9r/132/
jsFiddle：http: //jsfiddle.net/NFJ9r/132/
Code:
代码：
function getSelectionCoords(win) {
win = win || window;
var doc = win.document;
var sel = doc.selection, range, rects, rect;
var x = 0, y = 0;
if (sel) {
if (sel.type != "Control") {
range = sel.createRange();
range.collapse(true);
x = range.boundingLeft;
y = range.boundingTop;
}
} else if (win.getSelection) {
sel = win.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0).cloneRange();
if (range.getClientRects) {
range.collapse(true);
rects = range.getClientRects();
if (rects.length > 0) {
rect = rects[0];
}
x = rect.left;
y = rect.top;
}
// Fall back to inserting a temporary element
if (x == 0 && y == 0) {
var span = doc.createElement("span");
if (span.getClientRects) {
// Ensure span has dimensions and position by
// adding a zero-width space character
span.appendChild( doc.createTextNode("\u200b") );
range.insertNode(span);
rect = span.getClientRects()[0];
x = rect.left;
y = rect.top;
var spanParent = span.parentNode;
spanParent.removeChild(span);
// Glue any broken text nodes back together
spanParent.normalize();
}
}
}
}
return { x: x, y: y };
}
UPDATE
更新
I submitted a WebKit bug as a result of the comments, and it's now been fixed.
作为评论的结果，我提交了一个 WebKit 错误，现在已修复。
回答by Jakobovski
The above answer by TimDown does not work if the caret is in an empty element.
如果插入符号位于空元素中，则 TimDown 的上述答案不起作用。
The code below solves the problem. Note how it is almost identical to TimDown's solution except that this code checks the range.getClientRects()array has length>0before calling range.getClientRects()[0]
下面的代码解决了这个问题。请注意它与 TimDown 的解决方案几乎相同，除了此代码在调用之前检查range.getClientRects()数组length>0range.getClientRects()[0]
function getSelectionCoords() {
var sel = document.selection, range, rect;
var x = 0, y = 0;
if (sel) {
if (sel.type != "Control") {
range = sel.createRange();
range.collapse(true);
x = range.boundingLeft;
y = range.boundingTop;
}
} else if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0).cloneRange();
if (range.getClientRects) {
range.collapse(true);
if (range.getClientRects().length>0){
rect = range.getClientRects()[0];
x = rect.left;
y = rect.top;
}
}
// Fall back to inserting a temporary element
if (x == 0 && y == 0) {
var span = document.createElement("span");
if (span.getClientRects) {
// Ensure span has dimensions and position by
// adding a zero-width space character
span.appendChild( document.createTextNode("\u200b") );
range.insertNode(span);
rect = span.getClientRects()[0];
x = rect.left;
y = rect.top;
var spanParent = span.parentNode;
spanParent.removeChild(span);
// Glue any broken text nodes back together
spanParent.normalize();
}
}
}
}
return { x: x, y: y };
}
