40 votos

Posición del cursor en un textarea (índice de carácter, no x y coordenadas)

¿Cómo puedo obtener posición del cursor en un textarea con jQuery? Estoy buscando a que el cursor de desplazamiento desde el comienzo del texto, no para (x, y) posición.

65voto

Ryan Puntos 672

Solución de BojanG modificado para trabajar con jQuery. Probado en IE, FF 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);

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

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

7voto

dacracot Puntos 8567

No de jQuery, pero sólo Javascript...

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

7voto

Kevin Puntos 956

He hecho algunos trabajos utilizando este jQuery enmascarado de la conexión de entrada y encuentra el símbolo de intercalación función realmente útil. He tirado este código desde el anterior 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 };
        }
    }

Una vez que hayas creado la función que usted puede hacer operaciones como las siguientes. Una vez más, esta función fue retirado de la jQuery enmascarado de entrada de la función 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

4voto

Maximilian Ruta Puntos 181

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 entonces la versión de Ryan

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X