CODEWITHSUNDEEP
javascriptiframedesignmode
Kincaid
Kincaid

Reputation: 145

designMode iFrame Get Cursor Position

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.

Upvotes: 4

Views: 7027

Answers (2)

jdb
jdb

Reputation: 1

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;

}

Upvotes: -1

Tim Down
Tim Down

Reputation: 324627

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

Upvotes: 8

Related Questions