如何在不更改DOM的情况下计算文本选择的高度

Question

我正在使用Range来操作所选文本.我想计算某人开始选择文本到完成位置的高度.

我已经尝试了所选范围的开始和结束的跨度,我可以准确地计算高度形式,但它改变了DOM并阻止我进行其他范围操作,如突出显示以前选择的文本.

我也尝试过收集mosedown和mosueup位置的位置,但我需要从所选文本的顶部到选择被释放的文本底部的准确高度,并非总是如此.

所以我想知道是否有办法在不改变DOM的情况下计算文本选择的高度？

Answer 1

这取决于您需要处理哪些浏览器.以下是将在IE> = 4和浏览器支持的工作功能getClientRects()中Range(火狐> = 4,WebKit的自2009年以来,歌剧).如果你需要支持早期的浏览器,你需要修改DOM,只要你将DOM恢复到以前的状态就可以了.

jsFiddle:http://jsfiddle.net/W84yW/

码:

function getSelectionHeight() {
    var selHeight = 0;
    if (document.selection && document.selection.type == "Text") {
        var textRange = document.selection.createRange();
        selHeight = textRange.boundingHeight;
    } else if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount > 0) {
            var range = sel.getRangeAt(0);
            if (!range.collapsed && range.getClientRects) {
                var startRange = range.cloneRange();
                startRange.collapse(true);
                var selTop = startRange.getClientRects()[0].top;
                startRange.detach();
                var endRange = range.cloneRange();
                endRange.collapse(false);
                selHeight = endRange.getClientRects()[0].bottom - selTop;
                endRange.detach();
            }
        }
    }
    return selHeight;
}