Question

我想在文本选择的初始或终端角上绝对定位div，因为用户拖动它们的鼠标。不幸的是，Range只提供索引位置，而不是x / y坐标。我认为可能有一种方法可以使用range.insertNode，但仅限于一方。（这也可能有助于某人在满足的情况下定位自动完成框。）

如何获取文本选择或文本光标的x / y坐标？

Answer 1

在chrome / webkit中工作，在最后选择的字母后面定位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>

Answer 2

您必须从鼠标移动事件中获取鼠标位置。然后你可以得到文本输入元素的位置并进行数学运算（使鼠标位置相对）。

编辑：

Here is a page您可以在其中获取将以像素为单位获取插入位置的JavaScript代码。

如果您想使用JQuery，可以使用this

javascript选择/范围坐标

2 个答案: