Cursor position in a textarea (character index, not x/y coordinates)
Solution 1:
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();
Solution 2:
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;
}
Solution 3:
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
Solution 4:
Not jQuery, but just Javascript...
var position = window.getSelection().getRangeAt(0).startOffset;