Question

我需要文本选择开头的像素坐标（页面上的任何位置，而不是文本区域）。

我尝试使用光标坐标，但这不能很好地工作，因为光标坐标和选择的开头并不总是相同（例如当用户拖动文本时）。

我希望有人有解决方案！

Answer 1

在IE＆gt; = 9和非IE浏览器（Firefox 4 +，自2009年初发布的WebKit浏览器，Opera 11，可能更早）中，您可以使用Range boundingLeft方法。在IE 4 - 10中，您可以使用可从选择中提取的boundingTop TextRange和0, 0属性。这是一个可以在最近的浏览器中执行所需操作的功能。

请注意，在某些情况下，您可能会错误地获得坐标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 }; }，如@Louis的评论中所述。在这种情况下，您将不得不回到暂时插入元素并获得其位置的解决方法。

jsFiddle：getClientRects()

代码：

{{1}}

<强>更新

由于评论我提交了一个WebKit错误，现在已经修复了。

http://jsfiddle.net/NFJ9r/132/

Answer 2

如果插入符号位于空元素中，则TimDown的上述答案无效。

下面的代码解决了这个问题。请注意它与TimDown的解决方案几乎完全相同，只是此代码在调用range.getClientRects()之前检查length>0数组是否为range.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 };
}

Answer 3

下面的代码是 Tim Down 给出的解决方案的简化和现代化版本。它还使用了更多的 browser compatible selection 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 };
}

浏览器页面中所选文本的坐标

3 个答案: