javascript - selección - proyecto de reclutamiento y seleccion de personal de una empresa

¿Cómo obtener los puntos de inicio y final de selección en el área de texto?

Question

Quiero obtener la posición inicial y final del cursor de un rango seleccionado en un campo de texto o área de texto. Probé muchas funciones en varios foros. pero cuando el último carácter de la selección es una nueva línea, JavaScript lo ignora en IE6. ¿Alguien tiene idea?

Answer 1

Necesitaba hacer algo muy similar y se me ocurrió esto:

function getSelection(target) {
    var s = {start: 0, end:0};
    if (typeof target.selectionStart == "number"
        && typeof target.selectionEnd == "number") {
        // Firefox (and others)
        s.start = target.selectionStart;
        s.end = target.selectionEnd;
    } else if (document.selection) {
        // IE
        var bookmark = document.selection.createRange().getBookmark();
        var sel = target.createTextRange();
        var bfr = sel.duplicate();
        sel.moveToBookmark(bookmark);
        bfr.setEndPoint("EndToStart", sel);
        s.start = bfr.text.length;
        s.end = s.start + sel.text.length;
    }
    return s;
}

Notas:

• El rango sel debe ser creado por target lugar de usar el rango devuelto por document.selection , de lo contrario bfr.setEndPoint se quejará de un argumento no válido. Esta "característica" (descubierta en IE8) no parece estar documentada en la spec .
• target debe tener un enfoque de entrada para que funcione esta función.
• Solo probado con <textarea> , también podría funcionar con <input> .

Answer 2

Usa la api de Rangy y todos tus problemas se Rangy ^_ido ...

Usandolo

Lea la documentación , o simplemente use la siguiente.
Muy simple,

var selection = rangy.getSelection(),  // Whole lot of information, supports
                                       // multi-selections too.
    start   = selection.anchorOffset,  // Start position
    end     = selection.focusOffset;   // End position

Espero que esta API le ayude porque es realmente útil para manejar ranges navegadores .

Answer 3

Respuesta revisada, 5 de septiembre de 2010

Para tener en cuenta los saltos de línea finales es complicado en IE, y no he visto ninguna solución que haga esto. Es posible, sin embargo. La siguiente es una nueva versión de lo que publiqué anteriormente aquí.

Tenga en cuenta que el área de texto debe tener el enfoque para que esta función funcione correctamente en IE. En caso de duda, llame primero al método focus() textarea.

function getInputSelection(el) {
    var start = 0, end = 0, normalizedValue, range,
        textInputRange, len, endRange;

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(//r/n/g, "/n");

            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn''t return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("/n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("/n").length - 1;
                }
            }
        }
    }

    return {
        start: start,
        end: end
    };
}