如何在偏移量的javascript中找到xy位置

时间:2010-11-08 08:42:00

标签: javascript mozilla cursor-position

你好我的javascript代码有问题..

我希望在javascript中获取所选文本的xy位置,并使用这样的越位函数:

function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }

但是当我调用此函数找到位置选择文本时,位置X,Y的结果总是为0

var select = window.getSelection();

var posX = findPosX(select);
var posY = findPosY(select);

我使用mozilla firefox .. 请帮帮我

1 个答案:

答案 0 :(得分:2)

您需要在选区的一端插入虚拟元素。这是一个在所有主流浏览器中获取选择开始或结束坐标的函数,包括IE 6.注意,这需要支持getBoundingClientRect()元素的方法,这排除了Firefox 2.如果你需要支持该浏览器,您可以在虚拟元素上使用类似findPosX/Y函数的内容而不是getBoundingClientRect()

function getSelectionCoordinates(start) {
    var x = 0, y = 0, range;
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(sel.rangeCount - 1);
            range.collapse(start);
            var dummy = document.createElement("span");
            range.insertNode(dummy);
            var rect = dummy.getBoundingClientRect();
            x = rect.left;
            y = rect.top;
            dummy.parentNode.removeChild(dummy);
        }
    } else if (document.selection && document.selection.type != "Control") {
        range = document.selection.createRange();
        range.collapse(start);
        x = range.boundingLeft;
        y = range.boundingTop;
    }
    return {x: x, y: y};
}

var coords = getSelectionCoordinates(true);
alert(coords.x + ", " + coords.y);