Cursor position in a textarea (character index, not x/y coordinates)

Viewed 89230

How can I get the caret's position in a textarea using jQuery? I'm looking for the cursor's offset from the start of the text, not for the (x, y) position.

7 Answers

Modified BojanG's solution to work with jQuery. Tested in Chrome, FF, and IE.

(function ($, undefined) {
    $.fn.getCursorPosition = function() {
        var el = $(this).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;
        }
        return pos;
    }
})(jQuery);

Basically, to use it on a text box, do the following:

$("#myTextBoxSelector").getCursorPosition();

function caretPos(el)
{
    var pos = 0;
    // IE Support
    if (document.selection) 
    {
        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;
    }
    // Firefox support
    else if (el.selectionStart || el.selectionStart == '0')
        pos = el.selectionStart;

    return pos;

}

Not jQuery, but just Javascript...

var position = window.getSelection().getRangeAt(0).startOffset;

Easiest way to do it with jquery:

  var cursorPos= $("#txtarea").prop('selectionStart');

I am using this code to create a simple quicklink option/texteditor for my project.

Related