我需要文本选择开头的像素坐标（页面上的任何位置，而不是文本区域中）。
我尝试使用光标坐标，但效果不佳，因为光标坐标和选择的开头并不总是相同的（例如，当用户拖动文本时）。
我希望有人有解决方案！
浏览器页面中选定文本的坐标
IT技术
javascript
html
cursor
selection
textselection
2021-01-19 14:54:03
3个回答
在IE> = 9和非IE浏览器（Firefox 4+，WebKit浏览器自2009年年初发布，歌剧11，也许更早），你可以使用getClientRects()的方法Range。在 IE 4 - 10 中，您可以使用可以从选择中提取的boundingLeft和boundingTop属性TextRange。这是一个功能，可以在最近的浏览器中执行您想要的操作。
请注意，在某些情况下，您可能会错误地获得坐标0, 0，如@Louis 的评论中所述。在这种情况下，您将不得不退回到临时插入元素并获取其位置的解决方法。
jsFiddle：http : //jsfiddle.net/NFJ9r/132/
代码：
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 };
}
更新
作为评论的结果，我提交了一个 WebKit 错误，现在已修复。
如果插入符号位于空元素中，则 TimDown 的上述答案不起作用。
下面的代码解决了这个问题。请注意它与 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 };
}
下面的代码是 Tim Down 给出的解决方案的简化和现代化版本。它还使用了更兼容浏览器的选择 API（window.getSelection()而不是window.document.selection）
type Coord = {
x: number;
y: number;
};
// atStart: if true, returns coord of the beginning of the selection,
// if false, returns coord of the end of the selection
function getSelectionCoords(atStart: boolean): Coord | null {
const sel = window.getSelection();
// check if selection exists
if (!sel.rangeCount) return null;
// get range
let range = sel.getRangeAt(0).cloneRange();
if (!range.getClientRects) return null;
// get client rect
range.collapse(atStart);
let rects = range.getClientRects();
if (rects.length <= 0) return null;
// return coord
let rect = rects[0];
return { x: rect.x, y: rect.y };
}