wake-up-neo.net

Wie kann man den Cursor in Javascript an die letzte Stelle eines Textfeldes bewegen?

Ich habe ein Textfeld und eine Schaltfläche in einem Formular. Das Textfeld enthält möglicherweise bereits Text. Ich möchte, dass sich der Cursor an die letzte Stelle im Textbereich bewegt, wenn auf die Schaltfläche geklickt wird.

Ist das möglich?

31
sol

Mit "der letzten Position" meinst du das Ende des Textes?

Wenn Sie den ".value" eines Formularfelds ändern, wird der Cursor in jedem Browser mit Ausnahme von IE an das Ende verschoben. Mit IE müssen Sie sich die Hände schmutzig machen und die Auswahl absichtlich mit nicht standardmäßigen Schnittstellen ändern:

    if (browserIsIE) {
        var range= element.createTextRange();
        range.collapse(false);
        range.select();
    } else {
        element.focus();
        var v= element.value();
        element.value= '';
        element.value= v;
    }

Oder meinst du, den Cursor wieder an die Stelle setzen, an der er sich zuletzt befunden hat, als das Textfeld zuletzt scharfgestellt wurde?

In jedem Browser außer IE wird dies bereits durch den Aufruf von "element.focus ()" geschehen. Der Browser merkt sich die letzte Cursor-/Auswahlposition pro Eingabe und stellt sie wieder in den Fokus.

Dies wäre ziemlich schwierig in IE zu reproduzieren. Sie müssten die ganze Zeit abfragen, um zu überprüfen, wo sich der Cursor/die Auswahl befand, und sich diese Position merken, wenn sie sich in einem Eingabeelement befand, und dann die Position für ein bestimmtes Element abrufen, wenn die Schaltfläche gedrückt wurde, und sie wiederherstellen. Dies erfordert einige sehr langwierige Manipulationen von "document.selection.createRange ()".

Mir ist in jQuery nichts bekannt, was Ihnen dabei helfen könnte, aber vielleicht ist irgendwo ein Plugin dabei?

25
bobince

die Antwort von xgMz war für mich die beste. Sie müssen sich nicht um den Browser kümmern:

var html = $("#MyTextArea").val();
$("#MyTextArea").focus().val("").val(html);

Und hier ist eine kurze jQuery-Erweiterung, die ich geschrieben habe, um das nächste Mal für mich zu tun:

; (function($) {
    $.fn.focusToEnd = function() {
        return this.each(function() {
            var v = $(this).val();
            $(this).focus().val("").val(v);
        });
    };
})(jQuery);

Verwenden Sie wie folgt:

$("#MyTextArea").focusToEnd();
34
mkaj

Sie können dies auch tun:

$(document).ready(function()
{
    var el = $("#myInput").get(0);

    var elemLen = el.value.length;

    el.selectionStart = elemLen;
    el.selectionEnd = elemLen;

    el.focus();
});​

Dieser Code funktioniert sowohl für input als auch für textarea. Getestet mit neuesten Browsern: Firefox 23, IE 11 und Chrome 28.

jsFiddle hier verfügbar: http://jsfiddle.net/cG9gN/1/

Quelle: https://stackoverflow.com/a/12654402/114029

6

Sie könnten dieses https://github.com/DrPheltRight/jquery-caret verwenden

$('input').caretToEnd();
4
spilliton

Dies ist, was ich für Textbereiche in meinem Onclick oder anderen Ereignissen verwende, und es scheint für FireFox und IE 7 & 8 gut zu funktionieren. Er positioniert den Cursor am Ende des Textes und nicht an der Vorderseite.

this.value = "some text I want to pre-populate";
this.blur();
this.focus();
3
Ken

Setzen Sie den Mausfokus und bewegen Sie den Cursor an das Ende der Eingabe. Es funktioniert in jedem Browser, es ist nur eine einfache Logik hier.

input.focus();
tmpStr = input.val();
input.val('');
input.val(tmpStr);
2
Selvamani

Ich habe die @mkaj-Erweiterung ein wenig geändert, um den Standardwert zu unterstützen

; (function($) {
    $.fn.focusToEnd = function(defaultValue) {
        return this.each(function() {
            var prevValue = $(this).val();
            if (typeof prevValue == undefined || prevValue == "") {
                prevValue = defaultValue;
            }
            $(this).focus().val("").val(prevValue);
        });
    };
})(jQuery);

// See it in action here
$(element).focusToEnd("Cursor will be at my tail...");
0
bn00d