Как получить позицию каретки в contentEditable div при вводе новой строки?

Question

Я делаю богатый текстовый редактор с UIWebview, в котором используется div contentEditable. Я хочу получить позицию каретки в пикселях. Я много искал, и я получил код ниже.

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

Это решение устраняет проблему Newline в WebKit.

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