2

I am making a rich text editor with UIWebview, which uses a contentEditable div. I want to get the caret's position in pixels. I have searched a lot, and I got the code below.

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

The code above works well until I enter a newline. sel.getRangeAt(0) returns null, so the function can't return the right caret Y pixels.

6
  • sel.getRangeAt(0) is surprising. An example might help.
    – Tim Down
    Apr 26, 2013 at 9:04
  • @Tim Downhttp://jsfiddle.net/timdown/xMEjD/ Apr 27, 2013 at 0:57
  • @Tim Down I found a solution which you write, jsfiddle.net/timdown/xMEjD this code work well on IE, but not on safari, when you set cursor on the end of a line, and then click "Enter" key,the cursor goes the beginng of next line, but the cursor's y position in pixels is "0", Apr 27, 2013 at 1:09
  • When the selection range doesn't give you a position, you may have to fall back to the tactic of inserting a temporary element at the caret position, getting the element's position and removing it again.
    – Tim Down
    Apr 27, 2013 at 15:09
  • @Tim Down How can I insert the element and remove it, sorry Tim Down, I am new to javascript, Can you give me a demo? Apr 27, 2013 at 17:19

2 Answers 2

5

Here is the code I am using to get the caret's top position by inserting a temp object and remove it:

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;
}
1
  • In a UIWebView (iOS), this code inserts blank line, and prevent the caret from blinking...
    – Denis
    Jun 28, 2014 at 12:46
1

This solution fixes the newLine issue in 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 };
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.