Retrieving Caret Start and End values

[Jezternz]

Find the Caret starting and ending position in a textarea.

I have been looking for a function that will do this for a long time. Its amazing how many site claim to have a function that works, but does not. I would like to get it done here and hopefully others will find this post and not have to waste time. I have these simple requirements:
I input an ellement id (of a textarea in my case)
I get an output of both a start and an end value of the caret.
This must work in Ie6/Ie7/ff.
I have read numourous articles, and tried many functions all with their own problems.
The closest I got was one that worked perfectly however It would add the number of characters in multiple textboxes not just the one stated with its id inputted. Rendering it pretty useless.

This page has helped me get the closest but with problems still:
http://www.bazon.net/mishoo/articles.epl?art_id=1292


Thanks Heaps, Josh

[mrhoo]

The caret's start position is the same index as its end position. Are you trying to capture a selection from the textarea?

[Jezternz]

yes. Well to be exact I would like to know whether its a selection captured or its jut in a single place. I realise start = end wen it is in a single place. So Idealy I want 2 numbers.

[Jezternz]

The closest one that I have is this:

function getSelectionStart(input) {
    var range = document.selection.createRange();
    var isCollapsed = range.compareEndPoints("StartToEnd", range) == 0;
    if (!isCollapsed)range.collapse(true);
    var b = range.getBookmark();
    return b.charCodeAt(2) - 2;
};
 
function getSelectionEnd(input) {
    var range = document.selection.createRange();
    var isCollapsed = range.compareEndPoints("StartToEnd", range) == 0;
    if (!isCollapsed)range.collapse(false);
    var b = range.getBookmark();
    return b.charCodeAt(2) - 2;
};

(from the link i previously posted)
and it works 100% fine except for example.
I have 2-4 selected, It will come out with 22-24 (note in this example the difference is 20, however this isnt always teh case its variable)... it always starts at strange values, it seems ot be counting other forms first or something.
Is there a way to modify it so it starts from 0 not eg 20.
thanks.

[Jezternz]

Well, after reading testing and modifying functions from many different authors. I found one that works. I am leaving this here, incase anyone else has the same problem.
The coordinates are always correct no matter what text is entered into other fields on the page.
This will work in both ff and ie.

I cant remember the author sorry.
The function is as follows.

function getCaretPosition(textareaid){
     var textarea = document.getElementById(textareaid);      
    var startpos = 0;
    var endpos = 0;
    // For Firefox
    if(document.getSelection){    
        startpos = textarea.selectionStart;
        endpos = textarea.selectionEnd;
    // For Internet Explorer
    }else if(document.selection){
        var range = document.selection.createRange();
        rangeCopy = range.duplicate();
        rangeCopy.moveToElementText(textarea);
        rangeCopy.setEndPoint( 'EndToEnd', range );
        startpos = rangeCopy.text.length - range.text.length;
        endpos = startpos + range.text.length;
    }
    return {start: startpos, end: endpos};
}
 

JS use example:

setTimeout("alert('From '+getCaretPosition('textid')['start']+' to '+getCaretPosition('textid')['end']);", 4000);
 

Cool. Hopefully this will save someone hours of time trying to find a fucntion that works correctly.
Most of them either dont work with dynamic text before or after the element or do not return both start and end position.

Thanks Josh