javascript - 使用 html 标签获取 contenteditable div 中的光标位置

Question

我有以下 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 将失败。

我想要什么？

我想要真正的光标位置。不是 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 (有人回答“保存光标的位置”)但我究竟该如何实现呢？这是要走的路吗？)

提前致谢!

Answer 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);
})