我想绝对位置文本选择的初始或终端角落,当用户拖动鼠标。不幸的是,范围只提供索引位置,而不是x/y坐标。我认为可能有一种方法可以用range.insertNode做到这一点,但仅限于一方。 (这也可能有助于某人在contenteditable下定位一个自动完成框。)javascript选择/范围坐标
如何获取文本选择或文本光标的x/y坐标?
我想绝对位置文本选择的初始或终端角落,当用户拖动鼠标。不幸的是,范围只提供索引位置,而不是x/y坐标。我认为可能有一种方法可以用range.insertNode做到这一点,但仅限于一方。 (这也可能有助于某人在contenteditable下定位一个自动完成框。)javascript选择/范围坐标
如何获取文本选择或文本光标的x/y坐标?
工程在铬/ WebKit的,最后选择的字母后定位格。通常。
<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>
您必须从鼠标移动事件中获取鼠标位置。然后你可以得到文本输入元素的位置并进行数学运算(使鼠标位置相对)。
编辑:
Here is a page那里你可以得到的JavaScript代码,将获得以像素为单位的插入位置。
如果你想使用jQuery,您可以使用this
这是不正确的,因为您可以使用键盘箭头移动文本光标(并且如果您保持移位,则更改选择内容)。 – 2010-01-09 01:52:38
你的意思是,那么你想根据选择移动框?他们是否通过鼠标或按键来改变选择? – 2010-01-09 01:56:52
我的意思是你会得到非常不正确的x/y位置,因为鼠标光标位置与文本选择位置无关。这个问题很明显,我在寻找什么。用鼠标选择“你的意思,然后是你”。按住shift键。现在按下右箭头键。选择已经改变,但你不知道。现在,选择| this text |,然后将鼠标拖到最左侧,然后上下移动它。看看选择如何改变? – 2010-01-09 04:05:25
http://stackoverflow.com/questions/1589721/how-can-i-position-an-element-next-to-user-text-selection – 2010-01-08 23:34:06
大肚,请张贴,作为一个答案,所以我可以接受它。 – 2010-01-09 04:12:23