我需要使用
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中测试).
顶部和顶部没有问题底部位置,因为它们正常工作,这将有助于我计算高度.但是要计算宽度,我仍然需要正确的右侧坐标.
解决方法
这里有一些代码来获取选择的边界矩形的尺寸.它与原始代码非常相似.
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 };
}
