Javascript : Getting and Setting Caret Position in Textarea
function doGetCaretPosition (ctrl) {
var CaretPos = 0; // IE Support
if (document.selection) {
ctrl.focus ();
var Sel = document.selection.createRange ();
Sel.moveStart ('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}
function setCaretPosition(ctrl, pos){
if(ctrl.setSelectionRange)
{
ctrl.focus();
ctrl.setSelectionRange(pos,pos);
}
else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
Here “ctrl” is the Textarea object. This script works well with Internet Explorer, Firefox and Opera.
You can check it at Get/Set Caret in Textarea Example
Categories: Javascript
kindly dont block the freakin content with the ads
Hey everyone. This conversation has really helped point me in the right direction. I was having major issues with IE document selection. I tried many solutions, and found Alex’s to be the best. However, the code is really inefficient and starts to show when you’re working with a good amount of text in a textarea. I therefore made a few enhancements to Alex’s code to prevent looping through every character from the beginning of the textarea everytime you need to get cursor/selection positions. I also added the code to return the endpoint as well as the startpoint for selection range. I tested this in on FF3.5/Ubuntu/Win, IE8/Win, Chrome 4.1/Win, Chrome 5/Ubuntu, Safari4/Win, Opera10.53/Win, I hope this helps someone out. Cheers!
var textArea = $(‘myTextArea’);
var getPos = function() {setTimeout(“debugOutput();”, 1);};
var pos = 0;
textArea.onkeydown = getPos;
function debugOutput() {
var sel = getCursorPosition(textArea, pos);
pos = sel.start;
$(‘lblStart’).innerHTML = sel.start;
$(‘lblEnd’).innerHTML = sel.end;
}
function getCursorPosition(el, pos) {
if (document.selection) { // IE…
el.focus();
var sel = document.selection.createRange();
var sel2 = sel.duplicate();
sel2.moveToElementText(el);
if(sel.text.length > 1) {
pos = pos – sel.text.length;
if(pos < 0) {
pos = 0;
}
}
var caretPos = -1 + pos;
sel2.moveStart('character', pos);
while(sel2.inRange(sel)) {
sel2.moveStart('character');
caretPos++;
}
var selStr = sel.text.replace(/\r/g, "");
return {start: caretPos, end: selStr.length + caretPos};
}else if (el.selectionStart || el.selectionStart == 0) { //Most other browsers
return {start: el.selectionStart, end: el.selectionEnd};
}
}
function $(el) {
return document.getElementById(el);
}
@Alex this posting works just fantastic Alex August 19th, 2007 at 03:35 #18. I wasted about 3 days trying to understand othermechanisms to get around problems (some of) associated with IE V6.
)
This was the only example of code that behaved the same in both FF and IE for me
Thanks to you Alex
@Alex
You are the best!
This code works for me. its really gr8. Thanx a lot!!!!
code works! but the AdSense on this page is annoying..
Awesome!!! Tnx
nice
Hi Vishal,
Thank u for your solution. I was searching for a long time and was banging my hang for this problem. Your solution worked like a swift. Thank u once again.
Thanks