15

我一直在搜索很多，但我找不到一种方法来获取内容可编辑 div 上插入符号的 (X,Y) 坐标，网上有很多关于此的内容，但问题没有页面我发现根据div的顶部获取坐标，所以我的问题以更简单的方式是：

如何在内容可编辑的 div 上获取插入符号的 (X,Y) 坐标，但 Y 坐标必须根据 div 的顶部而不是从页面可见部分的顶部计算？

注1：我特别需要Y坐标。

注2：我只能使用纯javascript，没有JQUERY。

我的方式：

我还没有找到直接的方法来做到这一点，所以作为一种解决方法，我想根据页面的可见部分和 Div 的隐藏部分获取 Y 坐标并对结果求和（我目前正在研究这个但我没有运气！）。

4

4 回答 4

9

  1. 获取选择和范围

     var sel = window.getSelection();
 var range = sel.getRangeAt(0);

  2. 插入折叠的 div

     var div = document.createElement(...)
 range.insertNode(div)

  3. 获取div坐标

  4. 删除 div
于 2017-05-19T08:28:20.257 回答
8

尝试这个：

var selection = window.getSelection(),
    range = selection.getRangeAt(0),
    rect = range.getClientRects()[0];

在 rect var 中，您应该找到以下位置：

rect.left-> 用于 x 坐标 rect.top-> 用于 y 坐标

还有rect.width和rect.height。如果用户选择了一些文本rect.width，则 >0。

于 2019-10-21T09:43:09.140 回答
0

要在 (X,Y) 坐标上查找并使用纯 javascript，我发现的这个函数可能会奏效：在这个Source中，您将找到有关其过程的所有解释（以下代码取自同一来源）：

function getPosition(el) {
  var xPos = 0;
  var yPos = 0;

  while (el) {
    if (el.tagName == "BODY") {
      // deal with browser quirks with body/window/document and page scroll
      var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
      var yScroll = el.scrollTop || document.documentElement.scrollTop;

      xPos += (el.offsetLeft - xScroll + el.clientLeft);
      yPos += (el.offsetTop - yScroll + el.clientTop);
    } else {
      // for all other non-BODY elements
      xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
      yPos += (el.offsetTop - el.scrollTop + el.clientTop);
    }

    el = el.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}
于 2016-09-16T13:37:44.517 回答
-1

试试这个 http://plnkr.co/edit/T2S7sKByTIesEVC6R8jQ?p=preview

document.addEventListener("DOMContentLoaded", function(event) { 
  var pointer = document.querySelector('#marker')
  function checkCaret() {
    if(document.getSelection()) {
      if(document.getSelection().baseNode) {
        var position = document.getSelection().baseNode.parentNode.getBoundingClientRect()
        pointer.style.top = position.top + 'px'
      }
    }
  }
  setInterval(checkCaret, 500)
});
于 2016-09-15T19:30:05.707 回答