Caret coordinates in pixels

[maxirmx]

Hi everybody,
I need to calculate caret coordinates within TEXTAREA in pixels.
Pointing me to the right direction will be appreciated.
Thanks
MaxIRMX

[acoder]

These two links should help:
http://www.quirksmode.org/js/findpos.html
http://www.quirksmode.org/dom/tests/offset.html

[maxirmx]

These two links should help:
http://www.quirksmode.org/js/findpos.html
http://www.quirksmode.org/dom/tests/offset.html

Sorry, it does not. I understand how to calculate object coordinates. However, the task is to find CARET coordinates within textarea. It looks like creating a range might work for IE but I could not find anything that worked for Firefox.

[pronerd]

the task is to find CARET coordinates within textarea.

This is a reach, but you might try catching the onChange event from the textarea element in question, and checking the coordinates from the event. I am not sure if it would return the location of the carrot, or the mouse cursor.

If it does return the position of the carrot it would probably be the position on the page not the position inside the textarea. You could get the position in the text area though by subtracting the X, Y values from the position of the TextArea elment. The different should be the position inside the textarea.

[acoder]

Sorry, it does not. I understand how to calculate object coordinates. However, the task is to find CARET coordinates within textarea. It looks like creating a range might work for IE but I could not find anything that worked for Firefox.

Can you post the code that seems to work in IE.

Firefox has a different model to IE for working with ranges/selections.

[maxirmx]

Can you post the code that seems to work in IE.

Firefox has a different model to IE for working with ranges/selections.

 
            refT.caretPos = document.selection.createRange();
            // refT is the TextArea object 
            ...
            // irrelevant stuff
            ...
            posT=findPos(refT.caretPos);
            posT[0]+=document.documentElement.scrollLeft;
            posT[1]+=document.documentElement.scrollTop;
            ...
            // posT now holds caret position within document
            ...
function findPos(obj) 
{
    var curleft = curtop = 0;
    if (obj) 
    {
        do 
        {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    return [curleft,curtop];
}
 

[acoder]

Non-IE browsers use the W3C Range/Mozilla Selection.

See these links:
http://www.quirksmode.org/dom/range_intro.html
http://developer.mozilla.org/en/docs/DOM:range
You may also want to have a look at this for the window sizing properties.

[maxirmx]

Non-IE browsers use the W3C Range/Mozilla Selection.

... and W3C Range/Mozilla Selection object attributes provide offset in characters relative to the selected node.

[maxirmx]

Thank's everybody. This one works for Firefox. It does not work for IE but I can manage it.

[acoder]

Good to hear that you've something that works, though not sure why it wouldn't work in IE. However, since you have something working for IE, a little bit of feature detection [if (document.selection) ...] will do the trick.

[drhowarddrfine]

According to the quirksmode link, the standard 'range' doesn't work in IE but does work in all the modern browsers.

[acoder]

Yes, of course (as I mentioned earlier).

I would've thought that the linked code would have worked in IE too.