last - poner el cursor en un input jquery

Posición del cursor en un área de texto(índice de caracteres, no coordenadas x/y)

Question

¿Cómo puedo obtener la posición del cursor en un área de texto usando jQuery? Estoy buscando el desplazamiento del cursor desde el comienzo del texto, no para la posición (x, y) .

Answer 1

Esto también funciona en IE9, Firefox y Chrome:

(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);

Y creo que es mucho más limpio que la versión de Ryan

Answer 2

He hecho algo de trabajo usando este conector de entrada enmascarado jQuery y he encontrado que la función de intercalación es realmente útil. Saqué este código del plugin anterior.

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

Una vez que haya creado la función, puede realizar operaciones como las siguientes. Una vez más, esta función fue extraída de la función de entrada enmascarada jQuery mencionada anteriormente.

$("#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

Answer 3

No jQuery, pero solo Javascript ...

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

Answer 4

Se modificó la solución de BojanG para trabajar con jQuery. Probado en Chrome, FF e 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);

Básicamente, para usarlo en un cuadro de texto, haga lo siguiente:

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

Answer 5

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

Answer 6

function doGetCaretPosition(ctrl) {
var CaretPos = 0; // IE Support
if (document.selection) {
ctrl.focus();
var Sel = document.selection.createRange();
Sel.moveStart(''character'', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == ''0'')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}