How do you get the cursor position in a textarea? How do you get the cursor position in a textarea? javascript javascript

How do you get the cursor position in a textarea?


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.


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/


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