使用 html-tags 在 contenteditable div 中获取光标位置答案

【问题标题】：get cursor position in contenteditable div with html-tags使用 html-tags 在 contenteditable div 中获取光标位置
【发布时间】：2018-07-01 09:18:00
【问题描述】：

我有以下 div 和按钮：

<div id="msg" contenteditable></div>
<button class="button">Add some text</button>

我使用以下代码来获取光标位置：

function getCaretPosition(editableDiv) {
  var caretPos = 0,
    sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      if (range.commonAncestorContainer.parentNode == editableDiv) {
        caretPos = range.endOffset;
      }
    }
  } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    if (range.parentElement() == editableDiv) {
      var tempEl = document.createElement("span");
      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
      var tempRange = range.duplicate();
      tempRange.moveToElementText(tempEl);
      tempRange.setEndPoint("EndToEnd", range);
      caretPos = tempRange.text.length;
    }
  }
  return caretPos;
}

可以在此处找到 JSFiddle：https://jsfiddle.net/quqnmp9m/

如果单击按钮，则会添加：

<span class="font-weight:700;">Hello world!</span>

如果您只是在 div 中输入一些文本，一切正常：光标位置计算正确。但是如果你点击按钮，getCaretPosition 函数就会失败。

我想要什么？

我想要 REAL 光标位置。不是 div 可见部分的光标位置。一个例子：

如果内容是

Hello world!

光标位置应为 12。

但如果内容是

<span class="font-weight:700;">Hello world!</span>

光标位置应该是50。不是12。标签也应该包括在内。

有人有想法吗？

我已经检查并尝试了以下答案：

Get a range's start and end offset's relative to its parent container
JavaScript: get cursor position in contenteditable div
Cursor Positioning in ContentEditable Div（有人回答“保存光标的位置”）但我究竟如何才能做到这一点？这是要走的路吗？）

提前致谢！

【问题讨论】：

我刚刚又读了一遍，我想我的答案可能只是您想要的部分？
@Sam 您对此有什么解决方案吗？接受的答案不起作用。如果您确实得到了解决方案，您可以发布您的工作代码吗？

标签： javascript dom

【解决方案1】：

这会给你你想要的。它还会为您提供 html 的长度。

https://jsfiddle.net/ko5Lhbeo/

改变这个：

$('.msg').on('keyup',function(e){
    $('.cursor').html(getCaretPosition(document.getElementById('msg')));
})

对此：

// Added DOMSubtreeModified event here to fire whenever any modifications to the sub tree
$('.msg').on('keyup DOMSubtreeModified',function(e) {
    $('.cursor').html($('#msg').html().length);
})

【讨论】：