计算所选文本的宽度和高度(javascript)

我需要使用 JavaScript来计算所选/突出显示的文本的宽度和高度.

我使用由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 };
}

左和顶部坐标正在正确显示.要计算宽度&身高,我需要正确&底部位置也是如此.

所以我添加了几行代码找到底部&正确的位置(代码可用 – http://jsfiddle.net/pankajparashar/kv2Bp/).但令我吃惊的是,代码显示了左边的&正确的坐标总是相同的,即使它们之间有明显的区别(仅在Firefox中测试).

顶部和顶部没有问题底部位置,因为它们正常工作,这将有助于我计算高度.但是要计算宽度,我仍然需要正确的右侧坐标.

任何人可以用代码指出任何缺陷?或任何替代方法,使用我可以计算宽度&所选文字的高度?

解决方法

这里有一些代码获取选择的边界矩形的尺寸.它与原始代码非常相似.

演示: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 };
}

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...