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

Posted 2023-03-06

【中文标题】通过 javascript 在 contenteditable div 上获取插入符号坐标。

【英文标题】：Get caret coordinates on a contenteditable div through javascript.

【发布时间】：2013-06-05 16:26:08

【问题描述】：

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

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

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

注意2：我只能用纯javascript，不能用JQUERY。

我的方式：

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

【问题讨论】：

这是 ***.com/questions/6846230/… 的副本 - 您只需从返回的坐标中减去 div 位置。

不，这不是重复的问题。接受的答案没有回答我的问题。即使隐藏了 DIV 的一部分，我也需要获取坐标。

不是重复的

“插入符号的 (X,Y) 坐标”是什么意思？以像素为单位的坐标？ Caret 至少有高度，那么你想得到什么 Y 坐标？

当我在 Contentediatble 中写作时，我想要在每个实例中的位置

【参考方案1】：

获取选择和范围

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

插入折叠的 div

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

获取 div 坐标

删除 div

【讨论】：

我必须将其与以下答案结合起来，并让 getClientRects() 处理临时 div。

【参考方案2】：

试试这个：

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。

【讨论】：

我的客户矩形的长度为 0

有点奇怪的是，如果插入符号也在一行的末尾，那么 rect.width 可以> 0。选择似乎包含通过包装文本添加的“虚拟”换行符。因此，检查是否选择了文本的更好方法是查看开始和结束容器以及偏移量是否相等。不是很相关，但很好奇！

【参考方案3】：

要在 (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
  ;

【讨论】：

你能提供一个关于jsfiddle的例子吗

我需要它在可编辑的内容中我之前尝试过此代码

【参考方案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)
);

【讨论】：

"注 1：我特别需要 Y 坐标。"它给出了 y 坐标