Question

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

如何在一个可信的div上获得插入符号的（X，Y）坐标，但是Y坐标必须根据div的顶部计算，而不是从div的可见部分的顶部计算页吗

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

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

我的方式：

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

Answer 1

获取选择和范围

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

插入折叠的div

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

获取div坐标
删除div

Answer 2

找到（X，Y）坐标并使用纯javascript，我找到的这个函数可以做到这一点：在此UI Automation not working for DataGridView中，您将找到有关其流程的所有说明（以下代码取自同一来源）：

{{1}}

Answer 3

尝试一下：

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

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

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

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

Answer 4

试试这个 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)
});

通过javascript在contenteditable div上获取插入符号坐标。

4 个答案: