选定的文本位置答案

【问题标题】：selected text position选定的文本位置
【发布时间】：2009-12-31 10:21:06
【问题描述】：

如何在 Javascript 中获取所选文本的坐标？

【问题讨论】：

更多细节会有所帮助..
坐标是指距文档左上角的偏移量？

标签： javascript dom

【解决方案1】：

由于 Sarfraz 的链接主要涉及文本框，我假设您想要获取任何选择的位置，以下是获取它所需的步骤：

获取选择
将所选内容的第一个字母包装到 span 元素中
计算所述跨度元素的偏移量。 jQuery 的offset 方法在这里很有用。
删除创建的跨度

简而言之，我不会开始实现代码，因为 IE 拥有一种代码而其他浏览器拥有另一种代码会很棘手。

请注意，此方法仅适用于文本选择，例如，如果您有一个以图像开头的选择，事情可能会变得困难。

【讨论】：

【解决方案2】：

OnMouseDown() 和 OnMouseUp() 事件不是有用吗？？

要选择文本，您需要单击鼠标按钮 .. 并完成选择，您需要执行 mouseUp ..

使用 OnMouseDown 事件可以获取首字母的坐标，使用 OnMouseUp 可以获取最后一个字母的坐标 ..

检查此代码.. : ..

<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX;
y=event.clientY;
document.getElementById("one").innerHTML='X coords: ' + x + ', Y coords: ' + y;
}

function show_coords2(event)
{
x=event.clientX;
y=event.clientY;
var newb= document.getElementById("one").innerHTML+'<br/>'+'X coords: ' + x + ', Y coords: ' + y;
document.getElementById("one").innerHTML=newb;
}
</script>
</head>

<body onMouseDown="show_coords(event)" onMouseUp="show_coords2(event)">

<p>Click in the document to see the co-ordinates of the selected text</p>

<p id="one"></p>

</body>

输出如下内容::

Click in the document. An alert box will alert the x and y coordinates of the mouse pointer.

X coords: 8, Y coords: 15
X coords: 555, Y coords: 17

mouseDown 没有问题 .. 但是在 mouseUp 上，两个坐标都取决于触发事件的光标的确切位置 .. 这就是为什么您可以在上面的示例中看到坐标 Y 的微小变化..

请以 cmets 的身份提供反馈..

希望对你有帮助:-)

【讨论】：