12

我需要使用 JavaScript 计算所选/突出显示的文本的width和。height

我使用 Tim Down 编写的以下代码作为起点，

function getSelectionCoords() {
    var sel = document.selection, range;
    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);
                var rect = range.getClientRects()[0];
                x = rect.left;
                y = rect.top;
            }
        }
    }
    return { x: x, y: y };
}

left&top坐标显示正确。要计算宽度和高度，我还需要right&bottom位置。

所以我添加了几行代码来找到bottom& 的right位置（代码在这里 - http://jsfiddle.net/pankajparashar/kv2Bp/）。但令我惊讶的是，代码显示的left坐标right总是相同的，即使它们之间存在明显的差异（仅在 Firefox 中测试）。

top&位置没有问题bottom，因为它们工作得很好，这将帮助我计算高度。但是要计算宽度，我仍然需要正确right的坐标。

任何人都可以指出代码的任何缺陷吗？或任何替代方法，使用它我可以计算所选文本的宽度和高度？

4

2 回答 2

16

下面是一些代码来获取选择的边界矩形的尺寸。它与原始代码非常相似。

演示：http: //jsfiddle.net/UFkjy/

function getSelectionDimensions() {
    var sel = document.selection, range;
    var width = 0, height = 0;
    if (sel) {
        if (sel.type != "Control") {
            range = sel.createRange();
            width = range.boundingWidth;
            height = range.boundingHeight;
        }
    } else if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0).cloneRange();
            if (range.getBoundingClientRect) {
                var rect = range.getBoundingClientRect();
                width = rect.right - rect.left;
                height = rect.bottom - rect.top;
            }
        }
    }
    return { width: width , height: height };
}
于 2012-09-26T14:18:20.210 回答
2

尝试使用range.getBoundingClientRect而不是range.getClientRects。

JSFiddle

于 2012-09-26T14:01:32.147 回答