javascript选择/范围坐标
当用户拖动鼠标时，我想将div绝对定位在文本选择的起始或结束角。不幸的是，范围仅提供索引位置，而不提供x/y坐标。我认为可能有一种方法可以使用range.insertNode来实现这一点，但只适用于一侧。（这也可能有助于某人在contenteditable下定位自动完成框。）javascript选择/范围坐标,javascript,Javascript,当用户拖动鼠标时，我想将div绝对定位在文本选择的起始或结束角。不幸的是，范围仅提供索引位置，而不提供x/y坐标。我认为可能有一种方法可以使用range.insertNode来实现这一点，但只适用于一侧。（这也可能有助于某人在contenteditable下定位自动完成框。） 如何获取文本选择或文本光标的x/y坐标？您必须从鼠标移动事件获取鼠标位置。然后，您可以获得文本输入元素的位置并进行计算（使鼠标位置相对） 编辑： 您可以从中获取JavaScript代码，该代码将以像素为单位获取插入符号位置
如何获取文本选择或文本光标的x/y坐标？您必须从鼠标移动事件获取鼠标位置。然后，您可以获得文本输入元素的位置并进行计算（使鼠标位置相对） 编辑： 您可以从中获取JavaScript代码，该代码将以像素为单位获取插入符号位置
如果要使用JQuery，可以在chrome/webkit中使用Works，将div定位在最后一个选定字母之后。通常
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var $div;
var last;
function find() {
var selection = window.getSelection();
var text = selection.toString();
if (last==text) return; else last=text; // prevent needless computations if no changes to selection
if (selection.rangeCount==0) return;
var range = selection.getRangeAt(0);
var $span= $("<span/>");
newRange = document.createRange();
newRange.setStart(selection.focusNode, range.endOffset);
newRange.insertNode($span[0]); // using 'range' here instead of newRange unselects or causes flicker on chrome/webkit
var x = $span.offset().left;
var y = $span.offset().top;
$div.text(x+" "+y);
$div.css({left:x,top:y+($div.height())});
$span.remove();
}
$(window).load(function() {
$("body").keydown(function(e) {
//find();
setTimeout(find,0);
});
$("body").mousemove(function(e) {
//find();
setTimeout(find,0);
});
$div=$("<div style='border:1px solid red;background:white; position:absolute;'>").appendTo($("body"));
});
</script>
</head>
<body><p>the quick brown fox</p><ul><li>jumps <i>over</i></li></ul><p>the lazy dog</p></body>
</html>
var$div；
var last；
函数find（）{
var selection=window.getSelection（）；
var text=selection.toString（）；
if（last==text）return；else last=text；//如果选择没有更改，则防止不必要的计算
if（selection.rangeCount==0）返回；
var range=selection.getRangeAt（0）；
变量$span=$（“”）；
newRange=document.createRange（）；
newRange.setStart（selection.focusNode，range.endOffset）；
newRange.insertNode（$span[0]）；//在此处使用“range”而不是“newRange”将取消选中chrome/webkit，或导致其闪烁
var x=$span.offset（）.left；
变量y=$span.offset（）.top；
$div.text（x+“”+y）；
$div.css（{left:x，top:y+（$div.height（））}）；
$span.remove（）；
}
$（窗口）。加载（函数（）{
$（“正文”）.keydown（函数（e）{
//查找（）；
setTimeout（查找，0）；
});
$（“body”）.mousemove（函数（e）{
//查找（）；
setTimeout（查找，0）；
});
$div=$（“”）。附加到（$（“正文”）；
});
敏捷的棕色狐狸跳过懒狗