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将失败。

我想要什么？

我想要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（有人回答“保存光标的位置”），但我究竟能做到这一点？这是要走的路吗？）

提前致谢！

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

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

1 个答案: