designMode iFrame Get Cursor Position

Question

I want to get the cursor position of an editable iFrame (using designMode). Here is the code I have so far:

document.getElementById('iframe_id').contentWindow.document.getSelection().getRangeAt(0)

From there, getting the property startOffset gets the number of characters from the beginning of that line, but not from the beginning of the iFrame document. I would like to get the cursor position relative to the beginning of the document.

Please note: I am not interested in setting the cursor position; I just want to get it.

Preferably, I would like the fix to be compatible with Chrome/Safari/Firefox; compatibility with IE is not necessary.

Any help would be greatly appreciated.

Answer 1

The following is based on this answer but is modified to work with selections in any document (such as one in an iframe). The same caveats about the naïveté of this approach laid out in that answer still apply.

function getCaretCharacterOffsetWithin(element) {
    var doc = element.ownerDocument || element.document;
    var win = doc.defaultView || doc.parentWindow;
    var sel, range, preCaretRange, caretOffset = 0;
    if (typeof win.getSelection != "undefined") {
        sel = win.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            preCaretRange = range.cloneRange();
            preCaretRange.selectNodeContents(element);
            preCaretRange.setEnd(range.endContainer, range.endOffset);
            caretOffset = preCaretRange.toString().length;
        }
    } else if ( (sel = doc.selection) && sel.type != "Control") {
        range = doc.selection.createRange();
        preCaretRange = doc.body.createTextRange();
        preCaretRange.moveToElementText(element);
        preCaretRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
}

Example usage:

var iframe = document.getElementById("foo");
var iframeBody = (iframe.contentDocument || iframe.contentWindow.document).body;
alert( getCaretCharacterOffsetWithin(iframeBody) );

Answer 2

This worked for me

function getCaretPosition() {
var element = document.idEditbox.document.body; // just my content IFRAME
var doc = element.ownerDocument || element.document;
var win = doc.defaultView || doc.parentWindow;
var sel, range, preCaretRange, caretOffset = 0;
if (typeof win.getSelection != "undefined") {
    sel = win.getSelection();
    if (sel.rangeCount) {
        range = sel.getRangeAt(0);
        preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        caretOffset = preCaretRange.toString().length;
    }
} else if ( (sel = doc.selection) && sel.type != "Control") {
    range = doc.selection.createRange();
var tempRange = range.duplicate();
    preCaretRange = doc.body.createTextRange();
    preCaretRange.moveToElementText(element);
    preCaretRange.setEndPoint("EndToEnd", tempRange);
    caretOffset = preCaretRange.text.length;
}
return caretOffset;

}