How to get the caret position (cursor position) of a iframe which has designMode ‘on’ in firefox

Took me a couple of hours to find this out. Couldn’t find it on the internet. With a little bit of improvising finally found out the way.

var range = document.getElementById('iframe_id').contentWindow.getSelection().getRangeAt(0);
alert(range.startOffset);
alert(range.endOffset);

thats it.

Note:

Since this is an iframe we are talking about you should know the startOffset and endOffset is wrt to the container of the start pos and end pos text. In here what I meant by the container is that iframe may contain html tags.

For eg:

...my name is <b>saminda</b>. I like js.....

if you had selected the text “is samin” from the iframe the endOffset would be 5, not startOffset+3+5. Hope you understood

Tags: , , , , ,

10 Responses to “How to get the caret position (cursor position) of a iframe which has designMode ‘on’ in firefox”

  1. Mohammad Khatib Says:

    Thanks for this information.
    I am finding a hard time SETTING the caret position in the a designMode enabled iframe, do you know away of doing so?

    Thanks

  2. samindaw Says:

    this is for firefox, i daresay for other browsers this can differ.

    o=iframeObject
    sel=o.contentWindow.getSelection();

    //we are saving the current selected range obj
    range2=sel.getRangeAt(0);

    //and we need to create a new range object to set the caret position to 5
    var range = document.createRange();

    range.setStart(sel.anchorNode,5);

    range.setEnd(sel.anchorNode,5);

    //remove the old range and add the newly created range
    sel.removeRange(range2);

    sel.addRange(range);

    note the sel.anchorNode and sel.focusNode properties. If you understand the contents that in an iframe in designmode is also just bunch of xml tags (xml nodes), it is exactly what the properties mean. the selectionstart can be in one node while the selection end can be in another node. in the above sample i’m just putting both of them in the same node. Try debugging and see the values in the object “sel”. u’ll understand.

    hth

  3. Mohammad Khatib Says:

    Wow, this is awesome, this is exactly what I needed.
    Thank you very much

  4. Jon Says:

    Have you noticed that the caret will span multiple lines for FF if the focus is set programatically? If you click on the RTE then all is fine, but if there is a block of text (within a div, p, etc) and focus is called on it, I end up with a very tall blinking cursor. Very strange.

    Regards,

    Jon

  5. iFrame in desingMode="on", cursor positioning - JavaScript / Ajax / DHTML answers Says:

    […] iFrame in desingMode="on", cursor positioning Does this link […]

  6. mcallen web design Says:

    I delight in, cause I found just what I was having a look for.
    You have ended my 4 day long hunt! God Bless you
    man. Have a great day. Bye

  7. Mint Cosmetics Says:

    hi!,I love your writing very much! share we be in contact more about your article on AOL? I require a specialist in this house to unravel my problem. Maybe that is you! Looking forward to see you.

  8. Raden Muhammad Hamzah Fansaury Says:

    do you have some demo?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: