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

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

I have done some work using this jQuery masked input plug and found the caret function really useful. I've pulled this code from the above plugin..

$.fn.caret = function (begin, end)    {        if (this.length == 0) return;        if (typeof begin == 'number')        {            end = (typeof end == 'number') ? end : begin;            return this.each(function ()            {                if (this.setSelectionRange)                {                    this.setSelectionRange(begin, end);                } else if (this.createTextRange)                {                    var range = this.createTextRange();                    range.collapse(true);                    range.moveEnd('character', end);                    range.moveStart('character', begin);                    try { range.select(); } catch (ex) { }                }            });        } else        {            if (this[0].setSelectionRange)            {                begin = this[0].selectionStart;                end = this[0].selectionEnd;            } else if (document.selection && document.selection.createRange)            {                var range = document.selection.createRange();                begin = 0 - range.duplicate().moveStart('character', -100000);                end = begin + range.text.length;            }            return { begin: begin, end: end };        }    }

Once you've created the function you can do operations like the following. Once again, this function was pulled from the jQuery masked input function mentioned above.

$("#id").caret(); //get the begin/end caret position$("#id").caret().begin;$("#id").caret().end;$("#otherId").caret(5); //set the caret position by index$("#otherId").caret(1, 5); //select a range