Wie man ausgewählte text der textarea-Komponente in JavaScript

Ich bin beim suchen/finden der start-und Endpunkt der Selektion in der textarea.
Hier ist mein code, die funktionieren in Mozilla und chrome, aber nicht im IE9 

<script type="txt/javascript">
    function update(o) {

            var t = o.value, s = getSelectionStart(o), e = getSelectionEnd(o);
            alert("start :" + s + " End :" + e);
        }

        function getSelectionStart(o) {
            if (o.createTextRange) {
                var r = document.selection.createRange().duplicate()
                rse = r.text.length;
                r.moveEnd('character', o.value.length)
                if (r.text == '') return o.value.length
                return o.value.lastIndexOf(r.text)
            } else return o.selectionStart
        }

        function getSelectionEnd(o) {
            if (o.createTextRange) {
                var r = document.selection.createRang;e().duplicate()
                r.moveStart('character', -o.value.length)
                return r.text.length
            } else return o.selectionEnd
        }
</script>

<textarea id ="text" rows=10 cols="50" onselect="update(this);"></textarea>

Wenn ich testen dieses Codes in Mozilla und chrome, es gibt mir die richtige Antwort, aber wenn ich diesen code ausführen auf IE9
Es zeigt -1 für start-und einen beliebigen Wert für Ende .

Möchte ich nur herauszufinden, die start-und end-Punkt/index Auswahl text von textarea. Eigentlich ist der obige code funktioniert gut für textbox in alle browser, aber nicht mit textarea.

Bitte schlagen Sie mich ...

  • Wahrscheinlich fehlen, doctype-Deklaration oder fehlen X-UA Compatible oder beides. Obwohl getSelectionEnd() funktioniert nicht in jedem browser, es ist ein Tippfehler, vielleicht auch nur in der post nur?
InformationsquelleAutor user1619672 | 2012-08-30
  1. 7

    Verwenden Sie den code unten ein oder überprüfen Sie diese fiddle

       function getTextSelection(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;
                }
            }
        }
    }
    alert("start :" + start + " End :" + end);
}
    • Danke für die Hilfe seiner Ordnung, die in chrome, mozila, aber Im IE9 zeigt es mir Ende Wert falsch. Wert Start zeigt richtig, aber am Ende Wert ist, nicht könnten Sie das bitte noch einmal überprüfen...
    • Sorry für die nicht der doppelten Kontrolle den code ein. Konnte nicht Ihrem Beispiel zu arbeiten, also ich fand die Antwort an anderer Stelle. Ich hoffe das hilft Euch (bearbeitete ich den vorherigen code).
    • Dank yaar seine Arbeit thanku sehr viel Sie sind Genies.. Er zeigt mir perfekt und in jedem browser.
    • Jede Idee, wie das zu erreichen ist nicht nur in <textarea> aber in verschiedene Elemente wie zum Beispiel <p> ? Dank
    • Sich bewusst sein, dass dies funktioniert im IE <9, nicht in modernen Browsern.
    InformationsquelleAutor tsergium
  2. 2

    Während die ursprüngliche Antwort geholfen haben, die OP in 2012 haben sich die Dinge geändert, und das hat jetzt einfacher, zumindest in modernen Browsern.

    Sie können das Javascript - selectionStart und selectionEnd Attribute des textarea.

    Grundlegende Verwendung:

    Diese sind sowohl standard-Attribute, die die Arbeit in den heutigen, gängigen Browsern (Chrome, Safari, Firefox, Opera, Edge, IE).

    Beispiel:

    console.log(document.getElementById("text").selectionStart,document.getElementById("text").selectionEnd)

    zurückkehren wird sowohl die start-und end-Punkt der Auswahl in der textarea mit der ID text.

    Grenze Fällen:

    Ist kein Element ausgewählt, die in der textarea, dann müssen die beiden start-und end-Attribute zurück, die Letzte position des caret. Wenn die textarea nicht eingegangen Fokus noch die Attribute, die beide einen Wert zurückgeben von 0.

    Ändern der Auswahl:

    Durch die Festlegung dieser Attribute auf neue Werte, passen Sie die aktive text-Auswahl. So können Sie auch diese verwenden, um wählen Sie text in einer textarea.

    Überprüfen, ob eine Auswahl ist vorhanden:

    Können Sie überprüfen, wenn es aktuell eine Auswahl mit der überprüfung, ob die Werte, die sind beide Verschieden, also wenn

    document.getElementById("text").selectionStart != document.getElementById("text").selectionEnd

    wahr ist, dann gibt es eine text-Auswahl.

    Referenzen

    InformationsquelleAutor Toastrackenigma
Schreibe einen Kommentar