获取contentEditable插入符号索引位置

获取contentEditable插入符号索引位置

以下代码假定：

• 可编辑内容中始终只有一个文本节点

  <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>