wake-up-neo.com

Wie erhält man die Cursorposition in einem Textbereich?

Ich habe ein Textfeld und würde gerne wissen, ob ich mich in der letzten Zeile des Textfelds oder in der ersten Zeile des Textfeldes mit meinem Cursor mit JavaScript befindet.

Ich dachte an die Position des ersten Newline-Zeichens und des letzten Newline-Zeichens und dann an die Position des Cursors.

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.
  • Ist es möglich, die Cursorposition innerhalb des Textbereichs zu erfassen?
  • Haben Sie einen besseren Vorschlag, um herauszufinden, ob ich mich in der ersten oder letzten Zeile eines Textbereichs befinde?

jQuery-Lösungen werden bevorzugt, sofern JavaScript nicht so einfach oder einfacher ist.

javascriptjqueryhtmlinputtextarea
56
Chev

Wenn es keine Auswahl gibt, können Sie die Eigenschaften .selectionStart oder .selectionEnd verwenden (ohne Auswahl sind sie gleich).

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

Beachten Sie, dass dies in älteren Browsern nicht unterstützt wird, insbesondere IE8-. Dort müssen Sie mit Textbereichen arbeiten, was jedoch völlig frustrierend ist.

Ich glaube, dass es irgendwo eine Bibliothek gibt, die dazu dient, Auswahl-/Cursorpositionen in Eingabeelementen abzurufen und festzulegen. Ich kann mich nicht an seinen Namen erinnern, aber es scheint Dutzende von Artikeln zu diesem Thema zu geben.

68
pimvdb

Ich habe ziemlich viel daran gearbeitet und eine Funktion zum Einfügen von Caret-/Auswahlpositionen in Textbereichen auf Stack Overflow mehrmals bereitgestellt. Im Gegensatz zu so ziemlich jedem anderen Code, der dies tut, funktioniert es mit Zeilenumbrüchen in IE <9 einwandfrei.

Hier ist eine Beispielfrage mit etwas Hintergrund:

Gibt es einen von Internet Explorer zugelassenen Ersatz für selectionStart und selectionEnd?

Und hier ist ein Link zu einem jQuery-Plug-In, das ich geschrieben habe und das diese Funktion und andere auswahlbezogene Textfeldfunktionen enthält:

https://github.com/timdown/rangyinputs

20
Tim Down

Hier ist eine Cross-Browser-Funktion, die ich in meiner Standardbibliothek habe:

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

Verwenden Sie es in Ihrem Code wie folgt:

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

Hier ist seine ergänzende Funktion:

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/

17
gilly3

Hier ist der Code zum Abrufen der Zeilennummer und der Spaltenposition

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 ist das DOM-Element des Textbereichs

0
Clay Smith