For IE6: if I have a textarea such as

ABC

and I call your function for every move of the cursor I get the following debug trace in my software:

Selection mode mode (1 char at a time)
Start(0), End(1), Length(1), Text(A)
Start(1), End(2), Length(1), Text(B)
Start(2), End(3), Length(1), Text(C)

Non selection mode (simply pressing right arrow)
Start(0), End(0), Length(0), Text()
Start(1), End(1), Length(0), Text()
Start(2), End(2), Length(0), Text()
Start(1), End(1), Length(0), Text()

as you can possible see from the last line when I the cursor is to the right of the ‘C’ I would expect the output to read
Start(3), End(3), Length(0), Text()

This is what happens in Firefox (albeit through a different branch of the function)

Any ideas how to modify the code to correct this small inconsistency?

document.selection.createRange(); not working for textbox. is there any alternative for it?

Regards,
Chandu

//Mozilla and DOM 3.0
if(’selectionStart’ in e)
{
var l = e.selectionEnd – e.selectionStart;
return { start: e.selectionStart, end: e.selectionEnd, length: l, text: e.value.substr(e.selectionStart, l) };
}
//IE
else if(document.selection)
{
e.focus();
var r = document.selection.createRange();
var tr = e.createTextRange();
var tr2 = tr.duplicate();
tr2.moveToBookmark(r.getBookmark());
tr.setEndPoint(‘EndToStart’,tr2);
if (r == null || tr == null) return { start: e.value.length, end: e.value.length, length: 0, text: ” };
var text_part = r.text.replace(/[\r\n]/g,’.'); //for some reason IE doesn’t always count the \n and \r in the length
var text_whole = e.value.replace(/[\r\n]/g,’.');
var the_start = text_whole.indexOf(text_part,tr.text.length);
return { start: the_start, end: the_start + text_part.length, length: text_part.length, text: r.text };
}
//Browser not supported
else return { start: e.value.length, end: e.value.length, length: 0, text: ” };
}

function replace_selection(the_id,replace_str)
{
var e = document.getElementById(the_id);
selection = get_selection(the_id);
var start_pos = selection.start;
var end_pos = start_pos + replace_str.length;
e.value = e.value.substr(0, start_pos) + replace_str + e.value.substr(selection.end, e.value.length);
set_selection(the_id,start_pos,end_pos);
return {start: start_pos, end: end_pos, length: replace_str.length, text: replace_str};
}

function set_selection(the_id,start_pos,end_pos)
{
var e = document.getElementById(the_id);

//Mozilla and DOM 3.0
if(’selectionStart’ in e)
{
e.focus();
e.selectionStart = start_pos;
e.selectionEnd = end_pos;
}
//IE
else if(document.selection)
{
e.focus();
var tr = e.createTextRange();

//Fix IE from counting the newline characters as two seperate characters
var stop_it = start_pos;
for (i=0; i < stop_it; i++) if( e.value[i].search(/[\r\n]/) != -1 ) start_pos = start_pos – .5;
stop_it = end_pos;
for (i=0; i < stop_it; i++) if( e.value[i].search(/[\r\n]/) != -1 ) end_pos = end_pos – .5;

tr.moveEnd('textedit',-1);
tr.moveStart('character',start_pos);
tr.moveEnd('character',end_pos – start_pos);
tr.select();
}
return get_selection(the_id);
}

function wrap_selection(the_id, left_str, right_str, sel_offset, sel_length)
{
var the_sel_text = get_selection(the_id).text;
var selection = replace_selection(the_id, left_str + the_sel_text + right_str );
if(sel_offset !== undefined && sel_length !== undefined) selection = set_selection(the_id, selection.start + sel_offset, selection.start + sel_offset + sel_length);
else if(the_sel_text == '') selection = set_selection(the_id, selection.start + left_str.length, selection.start + left_str.length);
return selection;
}

//Your welcome

function getSelectionRange(oElm)
{
var $r = { text: “”, start: 0, end: 0, length: 0 };
if (oElm.setSelectionRange)
{ // W3C/Gecko
$r.start= oElm.selectionStart;
$r.end = oElm.selectionEnd;
$r.text = ($r.start != $r.end) ? oElm.value.substring($r.start, $r.end): “”;
}
else if (document.selection)
{ // IE
if (oElm.tagName && oElm.tagName === “TEXTAREA”)
{
var $oS = document.selection.createRange().duplicate();
var $oR = oElm.createTextRange();
var $sB = $oS.getBookmark();
$oR.moveToBookmark($sB);
}
else
var $oR = document.selection.createRange().duplicate();
$r.text = $oR.text;
for (; $oR.moveStart(“character”, -1) !== 0; $r.start++);
$r.end = $r.text.length + $r.start;
}
$r.length = $r.text.length;
return $r;
}

boundingLeft will NOT work at all in this situation – it gives a value in pixels not characters.

Stine version is also wrong as the text it self might contain “01″.

The original version seems to work almost perfectly, but I think setting the attributes is not a good idea as they won’t be updated and some script might use them to detect compatibility.

I said “almost perfectly”, because to get a caret position you should run:
element.focus()

// Current selection
var range = document.selection.createRange();

if(range.text != “”) {

// Calculate start and end points
sourceSelEnd = range.boundingLeft;
sourceSelStart = sourceSelEnd – range.text.length;
sourceSelected = range.text;

}

Documentation:
http://msdn.microsoft.com/en-us/library/ms533539(VS.85).aspx

Works beautifully for me!