How do you get the cursor position in a textarea?

Question

I have a textarea and I would like to know if I am on the last line in the textarea or the first line in the textarea with my cursor with JavaScript.

I thought of grabbing the position of the first newline character and the last newline character and then grabbing the position of the cursor.

var firstNewline = $('#myTextarea').val().indexOf('\n');
var lastNewline = $('#myTextarea').val().lastIndexOf('\n');

var cursorPosition = ?????;

if (cursorPosition < firstNewline)
    // I am on first line.
else if (cursorPosition > lastNewline)
    // I am on last line.

Is it possible to grab the cursor position within the textarea?
Do you have a better suggestion for finding out if I am on the first or last line of a textarea?

jQuery solutions preferred unless JavaScript is as simple or simpler.

Have you seen the solution here: http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/ — John Keyes, Oct 12 '11 at 20:09
This will throw an error, as the `indexOf` and lastIndexOf` functions are not methods of the val` function. You should use this (although you shouldn't use that code at all): `var firstNewline = String($("#myTextarea").val()).indexOf('\n');` — yaakov, Jan 11 '16 at 15:32
The **cursor** is your mouse pointer, the **caret** is the indicator where the text controller is present. — John, May 29 '18 at 08:41
@John Thanks for the description. To go further, conceptually a caret represents a location in text while a cursor represents a location in anything. Regarding graphical interfaces, they have distinct purposes and, often, different physical renderings. — Suncat2000, Apr 21 '20 at 13:40

score 118 · Accepted Answer · answered Oct 12 '11 at 20:11

118

If there is no selection, you can use the properties .selectionStart or .selectionEnd (with no selection they're equal).

var cursorPosition = $('#myTextarea').prop("selectionStart");

Note that this is not supported in older browsers, most notably IE8-. There you'll have to work with text ranges, but it's a complete frustration.

I believe there is a library somewhere which is dedicated to getting and setting selections/cursor positions in input elements, though. I can't recall its name, but there seem to be dozens on articles about this subject.

answered Oct 12 '11 at 20:11

pimvdb

151,816
78
307
352

Dang. Is there a way to get this working in IE8? Thank you for the solution. – CatDadCode Oct 12 '11 at 20:12
@Alex Ford: I now see it has been answered before in fact: http://stackoverflow.com/questions/2897155/get-caret-position-within-an-text-input-field. – pimvdb Oct 12 '11 at 20:17
You are correct. I used the jquery plugin that one answerer gave on the question you linked. That did it. Sorry for the duplicate. – CatDadCode Oct 12 '11 at 20:37
The linked answer doesn't work properly with line breaks in IE < 9. See my answer. – Tim Down Oct 13 '11 at 00:00
I think u are talking about jquery caret library – mlwacosmos Nov 07 '14 at 10:51
I get undefined – Nathan B May 07 '18 at 14:02

gilly3 · Answer 2 · 2012-05-22T23:31:49.630

Here's a cross browser function I have in my standard library:

function getCursorPos(input) {
    if ("selectionStart" in input && document.activeElement == input) {
        return {
            start: input.selectionStart,
            end: input.selectionEnd
        };
    }
    else if (input.createTextRange) {
        var sel = document.selection.createRange();
        if (sel.parentElement() === input) {
            var rng = input.createTextRange();
            rng.moveToBookmark(sel.getBookmark());
            for (var len = 0;
                     rng.compareEndPoints("EndToStart", rng) > 0;
                     rng.moveEnd("character", -1)) {
                len++;
            }
            rng.setEndPoint("StartToStart", input.createTextRange());
            for (var pos = { start: 0, end: len };
                     rng.compareEndPoints("EndToStart", rng) > 0;
                     rng.moveEnd("character", -1)) {
                pos.start++;
                pos.end++;
            }
            return pos;
        }
    }
    return -1;
}

Use it in your code like this:

var cursorPosition = getCursorPos($('#myTextarea')[0])

Here's its complementary function:

function setCursorPos(input, start, end) {
    if (arguments.length < 3) end = start;
    if ("selectionStart" in input) {
        setTimeout(function() {
            input.selectionStart = start;
            input.selectionEnd = end;
        }, 1);
    }
    else if (input.createTextRange) {
        var rng = input.createTextRange();
        rng.moveStart("character", start);
        rng.collapse();
        rng.moveEnd("character", end - start);
        rng.select();
    }
}

http://jsfiddle.net/gilly3/6SUN8/

@TimDown - You are right. I realize now that the version I pasted here, I'd been using for `` controls exclusively. I've edited my answer to use a version that works for `` controls as well. — gilly3, May 22 '12 at 23:36
No. I did post example usage that uses jQuery to get the element reference, but you can get the element reference without jQuery. — gilly3, Jul 10 '17 at 19:32

score 3 · Answer 3 · answered Aug 04 '15 at 19:25

Here is code to get line number and column position

function getLineNumber(tArea) {

    return tArea.value.substr(0, tArea.selectionStart).split("\n").length;
}

function getCursorPos() {
    var me = $("textarea[name='documenttext']")[0];
    var el = $(me).get(0);
    var pos = 0;
    if ('selectionStart' in el) {
        pos = el.selectionStart;
    } else if ('selection' in document) {
        el.focus();
        var Sel = document.selection.createRange();
        var SelLength = document.selection.createRange().text.length;
        Sel.moveStart('character', -el.value.length);
        pos = Sel.text.length - SelLength;
    }
    var ret = pos - prevLine(me);
    alert(ret);

    return ret; 
}

function prevLine(me) {
    var lineArr = me.value.substr(0, me.selectionStart).split("\n");

    var numChars = 0;

    for (var i = 0; i < lineArr.length-1; i++) {
        numChars += lineArr[i].length+1;
    }

    return numChars;
}

tArea is the text area DOM element

How do you get the cursor position in a textarea?

3 Answers3

Linked