Cross Browser Javascript Code to Get/Set Caret Position in Textarea/Input

With my JavaScript/C# application, a user can enter multiple SQL statements in a textarea, select one, and submit the form to execute it. The content of the textarea persists from post to post (which is what I want), but I also wanted the selection to persist from post to post. After several hours of searching for a solution, this code did the trick. I pass the start and finish positions of the selected text in hidden form fields and use them to set the selection range with your function on page load. Excellent.

Thanks,

Nice Article, much helpful.

Thanks a lot.
Its worked for me Fine.

Thanks
Susil

Hi guys,

i writting here after many hours of trying. So i will appreciate any kind of help. I have a big problem with IE.

When i apply the code above so as it is it work perfect. But if i call function doGetCaretPosition() after blur or keydown or keyup or click on textare it begins to behave “irrationally” showing wrong results (in text but if the cursor is on the end of a text it works correct).

Any ideas why? Thanks.

It works like a charm. I have tried many codes before you. Yours is super.

Thanks
keep up the good work.

This is not working in IE10. I wants to get current position of cursor in text area. 🙁

Thanks a lot. Very very helpful to me. You saved my huge time, thanks a lot again and again.

It would be nice if you made the line numbering non-selectable and run your code through JSLint. Java bracing is incorrect in JavaScript as it can mess up with the automatic insertion of semi-colons. Sorry but I get sick of seeing crappy Java techniques used in other languages, it is very unnecessary and I see it way to often.

Thanks a lot. Worked for me except in Chrome.Saved my time.

It doesn’t work if textarea is not the first element inside html body. I wrote ‘123456789’ and click between 3 and 4 and alert says the position is 6 (should be 3). I’m working on IE9. It’s a IE bug? what’s wrong?

Just what I was looking for…

Thanks for this code,just what i need,This is one of the most useful scripts I’ve ever found.

Can anyone please explain the code….

This is one of the most useful scripts I’ve ever found. Thanks a million for keeping this hosted. It was a life saver!

Wonderfull, Thanks

thank´s a lot

How could I insert text, tabs and line breaks at the caret position using an on website keyboard?

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.

Awesome!!! Tnx

This code works for me. its really gr8. Thanx a lot!!!!

@Alex
You are the best!

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);
}

Great solution, thx 🙂

I finally found/created a workable answer to the issue of not scrolling in Firefox. Specifically, I have a an AJAX updatepanel with dropdown list and an “insert” button. The user selects a value from the dropdown list, clicks the Insert button, and the value is appended to the value in the textbox. IE was easy, but FF was a nightmare. The solution was in combining many parts of multiple answers found on the web (i.s no one solution seemed to work with Ajax. I am not a “Javascript” guy, so there is probably room for lots of improvement – but it works for me. I am primarily concerned with FF and IE, but it could easily be modded for other browsers. Here is the code:

// Added for Ajax/Updatepanel
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoaded);
function pageLoaded(sender, args) {
var oTextbox = document.getElementById(”);
var browserout = findBrowser();
if (browserout === “IE”) {
if (oTextbox.createTextRange) {
var r = (oTextbox.createTextRange());
r.moveStart(‘character’, (oTextbox.value.length));
r.collapse();
r.select();
}
}
else if (browserout === “FF”) {
// Append a space and then backspace to delete it.
var elem = document.getElementById(“TextBox1”);
elem.focus();
elem.setSelectionRange(elem.value.length, elem.value.length);
evt = document.createEvent(“KeyboardEvent”);
evt.initKeyEvent(“keypress”, true, true, null, false, false, false, false, 0, 32);
elem.dispatchEvent(evt);
evt = document.createEvent(“KeyboardEvent”);
evt.initKeyEvent(“keypress”, true, true, null, false, false, false, false, 8, 0);
elem.dispatchEvent(evt);
}
else if (browserout === “Other”) {
if (oTextbox.createTextRange) {
var r = (oTextbox.createTextRange());
r.moveStart(‘character’, (oTextbox.value.length));
r.collapse();
r.select();
}
}
}
function findBrowser() {
var browser = {
‘name’: navigator.appName,
‘version’: navigator.appVersion,
‘userAgent’: navigator.userAgent,

// Functions returning true or false
‘isFF’: function() { return !(this.userAgent.indexOf(“Firefox”) == -1); },
‘isIE’: function() { return !(this.userAgent.indexOf(“MSIE”) == -1); },
‘isIE6’: function() { return !(this.userAgent.indexOf(“MSIE 6”) == -1); },
‘isIE7’: function() { return !(this.userAgent.indexOf(“MSIE 7”) == -1); },
‘isOpera’: function() { return !(this.userAgent.indexOf(“Opera”) == -1); },
‘isSafari’: function() { return !(this.userAgent.indexOf(“Safari”) == -1); }
}
if (browser.isFF() == 1) { return(“FF”); }
else if (browser.isIE() == 1) { return (“IE”); }
else { return (“Other”); }
}

Special thanks to all of the folks that have posted the parts I used to aggregate this. Extra special thanks to Saul on Stackoverflow for the “Keypress” idea!!!

I Found out that IE counts caret position using only 1 character for Carriage Return / Line Feed even though the textarea.innerText contains 2 characters.

So when Counting Caret Position either for setting or retrieving, you should count text by deleting either the CR or LF in a scratch work area:

data = mytext.innerText.replace(/\r/g,”);
pos = data.indexOf(‘Hello World’);

This is only for IE, I hope this helps…
Clif

@Alex
hi Alex
i had apply your getcareposition function it work fine, but seem to be my problem come from setcareposition function i hand used setcareposition (18) after that i use getcareposition and the result is 20
any idea from you, many thank for your help
VP

Okay, he’s hungry… new, smarter, try:

<input name=”something” id=”something” type=”text” onclick=”getCursorPos(this.id)” onkeyup=”getCursorPos(this.id);” onfocus=”registerTimeField(this);” value=” : “/>

Okay, that didn’t work in Opera, since Opera supports both kind of objects, but it doesn’t support the expand method. Sigh.

Anyway, it supports the FF/Safari stuff, so changing the order of the methods solved that problem.

I also had to fix my onwhataver-stuff, since IE/FF/Safari fires onkeydown for the arrow keys (which change the cursor position), but Opera does not. Opera fired onkeypress but not onkeydown. So, I hade to build make the function detect itself and put in both onwhatevers… sigh again!

Anyway, here’s the Opera comatible code:

function getCursorPos(id) {
control = document.getElementById(id);
var cursorPos = (cursorPosSaved[control.id]) ? cursorPosSaved[control.id] : 0;
if (window.getSelection) {
cursorPos = control.selectionStart;
} else if (document.selection) {
control.focus();
var oldRange = document.selection.createRange ();
var newRange = oldRange.duplicate();
newRange.expand(‘textedit’);
var cursorPos = -1;
while(newRange.inRange(oldRange)) {
newRange.moveStart(‘character’);
cursorPos++;
if (cursorPos == control.value.length) {
break;
}
}
}
cursorPosSaved[control.id] = cursorPos;
return cursorPos;
}

And the onwhateverstuff:

function registerTimeField(field) {
field.onkeypress = function(e) {
getCursorPos(field.id);
var keyCode = (window.event) ? window.event.keyCode : e.which;
keyChar = String.fromCharCode(keyCode);
debug(‘o’+keyCode);
if (keyCode == 8 || keyCode == 0 || keyCode == 37 || keyCode == 39 || (keyCode > 115 && keyCode < 124) || keyCode == 45 || keyCode == 46) {
return true;
} else if (keyCode == 38 || keyCode == 40) {
(keyCode == 38) ? do arrow-up-stuff : do arrow-down-stuff ;
} else {
return (detect-validation-error-stuff) ? false : true;
}
}
field.onkeydown = function(e) {
getCursorPos(field.id);
var keyCode = (window.event) ? window.event.keyCode : e.which;
debug(keyCode);
if (keyCode == 38 || keyCode == 40) {
(keyCode == 38) ? do arrow-up-stuff : do arrow-down-stuff;
(e) ? e.stopPropagation : window.event.cancelBubble = true;
return false;
} else {
return true;
}
}
}

HTML:

The original script works only on textarea without carriage return. The position is off by one for each Enter hit. Is there a fix for this? I’m trying to implement an autofill script in the textarea and need to find the exact position.

with Firefox, I always end up inserting text about 30 chars before the actual caret position! Any hint why?

It is not working fine for ContentEditable Div
How it can be

thank you!

just wanted to say thanks, this helped me a lot

OK, I get it – it does not work in my […]ing MSIE.

Here is slightly modified code compatible to IE 6.0 and Opera:

function GetCaretPosition(control)
{
var CaretPos = 0;
// IE Support
if (document.selection)
{
control.focus();
var Sel = document.selection.createRange ();
var Sel2 = Sel.duplicate();
Sel2.moveToElementText(control);
var CaretPos = -1;
while(Sel2.inRange(Sel))
{
Sel2.moveStart(‘character’);
CaretPos++;
}
}

// Firefox support

else if (control.selectionStart || control.selectionStart == ‘0’)
CaretPos = control.selectionStart;

return (CaretPos);

}

ups. I missed this:<SCRIPT LANGUAGE=VBSCRIPT>
option explicit
function newLine(str)
dim nl, r
set nl = new RegExp
nl.global = true
nl.pattern = “\r\n”
set r = nl.Execute(str)
newLine = r.count
set r = nothing
set nl = nothing
end function
</SCRIPT>

i am developing a web page in which i need to enter a text into a textbox at the cursor position, on button click from another text box.

Please help me if know how it is to be done

It’s a shame you didn’t credit the original authors for what is obviously code ripped off from PHPMyAdmin!!!

Seems like the setCaretPosition function got truncated in my prior posting:

function setCaretPosition (el, iCaretPos)
{
if (document.selection) // IE
{
var range

range = document.selection.createRange()

if (el.type == ‘text’) // textbox
{
range.moveStart (‘character’, -el.value.length)
range.moveEnd (‘character’, -el.value.length)
range.moveStart (‘character’, iCaretPos)
range.select()
}
else // textarea
{
range.collapse(false)
range.move (‘character’, iCaretPos – el.value.length + el.value.split(‘\n’).length – 1)
range.select()
}
}
else if (el.selectionStart || el.selectionStart == ‘0’) // Firefox
{
el.setSelectionRange(iCaretPos, iCaretPos)
}

Thanks for the code.

One of the few javascript examples that actually worked the way I wanted it to. Thanks!

Er, actually I meant line-feeds, not carriage returns.