浏览器页面中所选文本的坐标 [英] Coordinates of selected text in browser page

问题描述

我需要在文本选择开始处的像素坐标（页面上的任何位置，而不是textarea）。

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希望有人有解决方案！

I hope someone has the solution!

推荐答案

在IE> = 9和非IE浏览器2009年初，Opera 11，也许更早），您可以使用 getClientRects（） 方法 Range 。在IE 4 - 10中，您可以使用 TextRange的属性 boundingLeft 和 boundingTop / code>，可以从选择中提取。

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 boundingLeft and boundingTop properties of the TextRange that can be extracted from the selection. Here's a function that will do what you want in recent browsers.

请注意，在某些情况下，您可能会错误地获取坐标 0 ，0 ，如@Louis的注释中所述。在这种情况下，您必须回到临时插入元素并获取位置的解决方法。

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.

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

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 };
}

UPDATE

我提交了一个WebKit错误作为注释的结果，它现在已经修复。

I submitted a WebKit bug as a result of the comments, and it's now been fixed.

https://bugs.webkit.org/show_bug.cgi?id=65324

这篇关于浏览器页面中所选文本的坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！