Wie erhalte ich die Start- und Endpunkte der Auswahl im Textbereich?

Ich möchte die Start- und Endposition des Cursors eines ausgewählten Bereichs in einem Textfeld oder Textbereich abrufen.

Ich habe viele Funktionen in verschiedenen Foren ausprobiert, aber wenn das letzte Zeichen der Auswahl ein Zeilenumbruchzeichen ist, ignoriert JavaScript es im IE6.

Wie erhalte ich die Start- und Endpunkte der Auswahl?

Überarbeitete Antwort, 5. September 2010

Das Berücksichtigen nachgestellter Zeilenumbrüche ist im IE schwierig, und ich habe keine Lösung gesehen, die dies tut. Es ist jedoch möglich. Das Folgende ist eine neue Version dessen, was ich zuvor hier gepostet habe.

Beachten Sie, dass das Textfeld den Fokus haben muss, damit diese Funktion im IE ordnungsgemäß funktioniert. Rufen Sie im Zweifelsfall die Textareas an focus() Methode zuerst.

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

Verwenden Sie die Rangy api und alle Ihre Probleme sind gegangen gone gegangen ^_gegangen…

Es benutzen

Lesen Sie die Dokumentationoder verwenden Sie einfach das Folgende.
Sehr einfach,

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

Ich hoffe, diese API hilft Ihnen, weil sie es ist Ja wirklich hilfreich im Umgang Cross-Browser ranges.

Ich musste etwas sehr ähnliches tun und kam auf Folgendes:

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

Anmerkungen:

• Die sel Bereich muss erstellt werden von
  target anstatt den von zurückgegebenen Bereich zu verwenden document.selectionAndernfalls bfr.setEndPoint wird sich über ein ungültiges Argument beschweren. Dieses “Feature” (entdeckt in IE8) scheint nicht in der dokumentiert zu sein spez.
• target muss den Eingabefokus haben, damit diese Funktion funktioniert.
• Nur mit getestet <textarea>könnte mit funktionieren <input> auch.