輸入新行時，如何獲取插入符號在contentEditable div中的位置？

Question

我正在使用UIWebview制作一個富文本編輯器，該編輯器使用contentEditable div。 我想獲得插入符號的位置（以像素為單位）。 我已經搜索了很多，並且得到了下面的代碼。

function getCaretClientPosition() {
  var x = 0, y = 0;
  var sel = window.getSelection();
  if (sel.rangeCount) {
    var range = sel.getRangeAt(0);
    if (range.getClientRects) {
      var rects = range.getClientRects();
      if (rects.length > 0) {
        x = rects[0].left;
        y = rects[0].top;
      }
    }
  }
  return { x: x, y: y };
}

上面的代碼在輸入換行符之前效果很好。 sel.getRangeAt(0)返回null，因此該函數無法返回右插入符號Y像素。

Answer 1

這是我用來通過插入臨時對象並將其刪除來獲得插入符號最高位置的代碼：

function getCaretTopPosition() {
    document.execCommand('insertHTML', false, '<span id="hidden"></span>');
    var hiddenNode = document.getElementById('hidden');
    if (!hiddenNode) {
        return 0;
    }
    var topPosition = hiddenNode.offsetTop;
    hiddenNode.parentNode.removeChild(hiddenNode);
    return topPosition;
}

Answer 2

此解決方案解決了WebKit中的newLine問題。

function getCaretClientPosition() {
    var x = 0, y = 0;
    var sel = window.getSelection();
    if (sel.rangeCount) {

        var range = sel.getRangeAt(0);
        var needsToWorkAroundNewlineBug = (range.startContainer.nodeName.toLowerCase() == 'p'
                                           && range.startOffset == 0);

        if (needsToWorkAroundNewlineBug) {
            x = range.startContainer.offsetLeft;
            y = range.startContainer.offsetTop;
        } else {
            if (range.getClientRects) {
                var rects = range.getClientRects();
                if (rects.length > 0) {
                    x = rects[0].left;
                    y = rects[0].top;
                }
            }
        }
    }
    return { x: x, y: y };
}