[英]Calculate width & height of the selected text (javascript)
I need to calculate the width
and the height
of the selected/highlighted text using JavaScript. 我需要使用JavaScript计算所选/突出显示文本的width
和height
。
I am using the following code written by Tim Down, as the starting point, 我使用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 };
}
The left
& the top
co-ordinates are being displayed correctly. left
和top
坐标正确显示。 To calculate the width & the height, I need the right
& the bottom
positions as well. 要计算宽度和高度,我也需要right
和bottom
位置。
So I added few lines of code to find the bottom
& the right
positions (Code available here - http://jsfiddle.net/pankajparashar/kv2Bp/ ). 所以我添加了几行代码来查找bottom
和right
位置(此处可用代码 - http://jsfiddle.net/pankajparashar/kv2Bp/ )。 But to my surprise, the code displays the left
& the right
co-ordinates always the same, even though there is visible difference between them (tested only in firefox). 但让我吃惊,代码显示left
和中right
坐标总是相同的,尽管它们之间有明显的不同(仅在Firefox测试)。
There is no problem with the top
& the bottom
positions, as they are working perfectly, which will help me calculate the height. top
和bottom
位置没有问题,因为它们工作正常,这将帮助我计算高度。 But to calculate the width, I would still need the correct right
co-ordinate. 但是为了计算宽度,我仍然需要正确的right
坐标。
Can anybody point any flaws with the code? 任何人都可以用代码指出任何缺陷吗? or any alternate approach, using which I can calculate the width & the height of the selected text? 或任何替代方法,使用它我可以计算所选文本的宽度和高度?
Here's some code to get the dimensions of the selection's bounding rectangle. 这里有一些代码来获取选择的边界矩形的尺寸。 It's pretty similar to the original code. 它与原始代码非常相似。
Demo: http://jsfiddle.net/UFkjy/ 演示: 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 };
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.