获取contentEditable插入符号索引位置

Question

我在如何设置contentEditable元素中的光标或插入符号索引位置方面找到了很多很好的，跨浏览器的答案，但是却没有关于如何获取或找到其索引的答案…

我想做的是知道此div中插入符号的索引，位于keyup。

因此，当用户键入文本时，我可以随时知道其在contentEditable元素内的光标索引。

编辑：我正在寻找div内容（文本）内的 索引 ，而不是光标坐标。

<div id="contentBox" contentEditable="true"></div>

$('#contentbox').keyup(function() { 
    // ... ? 
});

Answer 1

以下代码假定：

• 可编辑内容中始终只有一个文本节点<div>，没有其他节点
• 可编辑的div没有将CSS white-space属性设置为pre

码：

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;

}


#caretposition {

  font-weight: bold;

}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="contentbox" contenteditable="true">Click me and move cursor with keys or mouse</div>

<div id="caretposition">0</div>

<script>

  var update = function() {

    $('#caretposition').html(getCaretPosition(this));

  };

  $('#contentbox').on("mousedown mouseup keydown keyup", update);

</script>