如何取得 ContentEditable 元素中的插入符位置？

檢索ContentEditable 元素中的插入符位置

與在contentEditable 元素中設定插入符位置的大量解決方案相比，確定其事實證明，目前的地位對許多開發商來說是難以捉摸的。這個問題解決了這一特定的知識差距。

要在使用者輸入（例如按鍵）時決定給定contentEditable 元素內的插入符位置，可以使用下列程式碼：

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

此程式碼在下列假設下運作：

• 可編輯的div 包含單一文字節點，沒有額外的巢狀元素。
• 可編輯 div 的 CSS 空白屬性未設定為「pre」。

有關使用嵌套元素容納更複雜內容的更全面的解決方案，請參閱以下 Stack Overflow 答案：https://stackoverflow.com/a/4812022/96100

以上是如何取得 ContentEditable 元素中的插入符位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！