It moves a bookmark from the document.selection textrange to an element textrange. It correctly calculates the start and end positions regardless of where the element is in the page. It now handles end of field bookmarks with no selection.

function getSelectionRange(oElm)
{
var $r = { text: “”, start: 0, end: 0, length: 0 };
if (oElm.setSelectionRange)
{ /* W3C/Gecko/IE9+ */
$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)
{ /* IE8- */
var $oS, $oR, $oT;
if (oElm.tagName && oElm.tagName === “TEXTAREA”)
{
$oS = document.selection.createRange().duplicate();
$oR = oElm.createTextRange();
$oR.collapse(false);
$oR.moveToBookmark($oS.getBookmark());
if ($oS.text === “”)
{
$oT = $oR.duplicate();
$oT.moveEnd(“character”, 1);
if ($oS.boundingWidth === $oT.boundingWidth && $oS.boundingHeight === $oT.boundingHeight)
{
$oR = $oT;
}
}
}
else
{
$oR = document.selection.createRange().duplicate();
}
$r.text = $oR.text;
$r.start = Math.abs($oR.moveStart(“character”, -1000000));
$r.end = $r.text.length + $r.start;
}
else if (document.getSelection)
{ /* Netscape 4 */
$r.text = document.getSelection();
$r.end = $r.text.length;
}
$r.length = $r.text.length;
return $r;
}

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

/*This javascript depends upon the jquery-1.3.2.js library

The content of this script sets a Selectionevent on every textarea in the document to update their selectionStart and selectionEnd. This is an IE hack to be able to use the normal selectionStart and selectionEnd Mozilla Firefox already has. The actual script to get the selection in IE is not mine! A person I only know as Stickman wrote it. This is the url: http://the-stickman.com/web-development/javascript/finding-selection-cursor-position-in-a-textarea-in-internet-explorer/
*/

$(document).ready(function(){
$(‘textarea’).select(function(){
if(document.selection){
var range = document.selection.createRange();
var stored_range = range.duplicate();
stored_range.moveToElementText(this);
stored_range.setEndPoint(‘EndToEnd’, range);
this.selectionStart = stored_range.text.length – range.text.length;
this.selectionEnd = this.selectionStart + range.text.length;
};
})
});