Home > Javascript > Javascript : Getting and Setting Caret Position in Textarea

Javascript : Getting and Setting Caret Position in Textarea

December 27th, 2005 Leave a comment Go to comments
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 Tags:
  1. March 21st, 2013 at 00:25 | #1

    Thanks a lot , it worked for me.

    Thanks\
    vijith

  2. Lekhnath Rijal
    March 21st, 2013 at 22:40 | #2

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

  3. March 24th, 2013 at 23:28 | #3

    “me too”. I see tinyMce uses this kind of function and I was looking to replicate the behaviour in other input fields.

  4. Bhavesh
    July 18th, 2013 at 00:11 | #4

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

  5. Sebastiaan Pol
    July 30th, 2013 at 05:29 | #5

    For getting the correct position in IE10, you need to use the code in the “else if” section (with the “firefox support” comment) in the example. If you want to use the snippet from the example in IE10 change your if statement into the following:

    // IE, but not IE10
    if (document.selection && navigator.appVersion.indexOf(“MSIE 10″) == -1) {
    …..
    }
    // Normal browsers and IE10
    else if (ctrl.selectionStart || ctrl.selectionStart == ’0′)

  6. fan
    August 2nd, 2013 at 03:43 | #6

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

    Thanks
    keep up the good work.

  7. Vrinda
    December 11th, 2013 at 02:58 | #7

    Thanks a ton.. this worked wonder… had nightmares to get it done in IE.. this code helped a lot :) thank you..thank you..thank you..thank you..thank you..

  8. PleaseHelp
    April 3rd, 2014 at 11:27 | #8

    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.

Comment pages
1 6 7 8 10
  1. July 8th, 2010 at 03:24 | #1
  2. May 28th, 2012 at 18:31 | #2