12

JavaScriptを使用して、選択/強調表示されたテキストのwidthとを計算する必要があります。height

出発点として、TimDownによって作成された次のコードを使用しています。

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.getClientRectsの代わりにrange.getBoundingClientRectを使用してみてください。

JSFiddle

于 2012-09-26T14:01:32.147 に答える