javascript - ejemplo - ¿Cómo se obtiene la posición del cursor en un área de texto?

textarea value javascript

Question

Tengo un área de texto y me gustaría saber si estoy en la última línea del área de texto o la primera línea en el área de texto con mi cursor con javascript.

Pensé en tomar la posición del primer carácter de nueva línea y el último carácter de nueva línea y luego tomar la posición del cursor.

var firstNewline = $(''#myTextarea'').val().indexOf(''/n'');
var lastNewline = $(''#myTextarea'').val().lastIndexOf(''/n'');

var cursorPosition = ?????;

if (cursorPosition < firstNewline)
    // I am on first line.
else if (cursorPosition > lastNewline)
    // I am on last line.

• ¿Es posible tomar la posición del cursor dentro del área de texto?
• ¿Tiene una mejor sugerencia para averiguar si estoy en la primera o última línea de un área de texto?

Se prefieren las soluciones jQuery a menos que javascript sea tan simple o simple.

Cualquier ayuda es muy apreciada.

Answer 1

Aquí hay un código para obtener el número de línea y la posición de la columna

function getLineNumber(tArea) {

    return tArea.value.substr(0, tArea.selectionStart).split("/n").length;
}

function getCursorPos() {
    var me = $("textarea[name=''documenttext'']")[0];
    var el = $(me).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;
    }
    var ret = pos - prevLine(me);
    alert(ret);

    return ret; 
}

function prevLine(me) {
    var lineArr = me.value.substr(0, me.selectionStart).split("/n");

    var numChars = 0;

    for (var i = 0; i < lineArr.length-1; i++) {
        numChars += lineArr[i].length+1;
    }

    return numChars;
}

tArea es el elemento DOM del área de texto

Answer 2

Aquí hay una función de navegador cruzado que tengo en mi biblioteca estándar:

function getCursorPos(input) {
    if ("selectionStart" in input && document.activeElement == input) {
        return {
            start: input.selectionStart,
            end: input.selectionEnd
        };
    }
    else if (input.createTextRange) {
        var sel = document.selection.createRange();
        if (sel.parentElement() === input) {
            var rng = input.createTextRange();
            rng.moveToBookmark(sel.getBookmark());
            for (var len = 0;
                     rng.compareEndPoints("EndToStart", rng) > 0;
                     rng.moveEnd("character", -1)) {
                len++;
            }
            rng.setEndPoint("StartToStart", input.createTextRange());
            for (var pos = { start: 0, end: len };
                     rng.compareEndPoints("EndToStart", rng) > 0;
                     rng.moveEnd("character", -1)) {
                pos.start++;
                pos.end++;
            }
            return pos;
        }
    }
    return -1;
}

Úselo en su código así:

var cursorPosition = getCursorPos($(''#myTextarea'')[0])

Aquí está su función complementaria:

function setCursorPos(input, start, end) {
    if (arguments.length < 3) end = start;
    if ("selectionStart" in input) {
        setTimeout(function() {
            input.selectionStart = start;
            input.selectionEnd = end;
        }, 1);
    }
    else if (input.createTextRange) {
        var rng = input.createTextRange();
        rng.moveStart("character", start);
        rng.collapse();
        rng.moveEnd("character", end - start);
        rng.select();
    }
}

http://jsfiddle.net/gilly3/6SUN8/

Answer 3

He trabajado mucho en esto y he publicado una función para obtener la posición de intercalación / selección en áreas de texto en Desbordamiento de pila varias veces. A diferencia de prácticamente cualquier otro código para hacer esto, funciona correctamente con saltos de línea en IE <9.

Aquí hay una pregunta de ejemplo con algunos antecedentes:

¿Existe un sustituto aprobado por Internet Explorer para selectionStart y selectionEnd?

Y aquí hay un enlace a un complemento de jQuery que he escrito que incluye esta función y otras funciones de texto relacionadas con la selección:

https://github.com/timdown/rangyinputs

Answer 4

La función getCursorPos () devolverá la posición del cursor en GWT

    TextArea content = new TextArea();
    content.getCursorPos();

Answer 5

Si no hay selección, puede usar las propiedades .selectionStart o .selectionEnd (sin selección son iguales).

var cursorPosition = $(''#myTextarea'').prop("selectionStart");

Tenga en cuenta que esto no es compatible con navegadores más antiguos, especialmente IE8-. Allí tendrás que trabajar con rangos de texto, pero es una completa frustración.

Sin embargo, creo que hay una biblioteca dedicada a obtener y establecer selecciones / posiciones de cursor en los elementos de entrada. No recuerdo su nombre, pero parece que hay docenas en artículos sobre este tema.