Verwenden Sie JavaScript, um den Cursor am Ende des Textes im Texteingabeelement zu platzieren

Question

Was ist der beste Weg (und ich nehme an, der einfachste Weg), um den Cursor am Ende des Textes in einem Eingabe-Text-Element über JavaScript zu platzieren - nachdem der Fokus auf das Element gesetzt wurde?

Answer 1

Es gibt eine einfache Möglichkeit, dies in Die meisten Browsern.

this.selectionStart = this.selectionEnd = this.value.length;

Aufgrund der *Störungen einiger Browser sieht eine umfassendere Antwort jedoch eher wie folgt aus

setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);

Verwendung von jQuery (um den Hörer zu setzen, ist aber sonst nicht notwendig)

$('#el').focus(function(){
  var that = this;
  setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='el' type='text' value='put cursor at end'>

Vanilla JS verwenden (Ausleihe addEvent Funktion von diese Antwort )

// Basic cross browser addEvent
function addEvent(elem, event, fn){
if(elem.addEventListener){
  elem.addEventListener(event, fn, false);
}else{
  elem.attachEvent("on" + event,
  function(){ return(fn.call(elem, window.event)); });
}}
var element = document.getElementById('el');

addEvent(element,'focus',function(){
  var that = this;
  setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
});

<input id='el' type='text' value='put cursor at end'>

---

Macken

Chrome hat eine seltsame Eigenart, bei der das Fokus-Ereignis ausgelöst wird, bevor der Cursor in das Feld bewegt wird, was meine einfache Lösung zunichte macht. Zwei Optionen, um dies zu beheben:

1. Sie können einen Timeout von 0 ms hinzufügen (um den Vorgang verschieben, bis der Stapel leer ist )
2. Sie können das Ereignis ändern von focus a mouseup . Das wäre für den Benutzer ziemlich lästig, es sei denn, man behält den Fokus im Auge. Ich bin nicht wirklich begeistert von diesen beiden Optionen.

Außerdem hat @vladkras darauf hingewiesen, dass einige ältere Versionen von Opera die Länge falsch berechnen, wenn sie Leerzeichen enthalten. In diesem Fall können Sie eine große Zahl verwenden, die größer sein sollte als Ihre Zeichenfolge.

Answer 2

Versuchen Sie dies, es hat bei mir funktioniert:

//input is the input element

input.focus(); //sets focus to element
var val = this.input.value; //store the value of the element
this.input.value = ''; //clear the value of the element
this.input.value = val; //set that value back.  

Damit der Cursor an das Ende bewegt werden kann, muss die Eingabe zuerst den Fokus haben, dann, wenn der Wert geändert wird, wird zum Ende gesprungen. Wenn Sie .value auf denselben Wert setzen, wird er sich in Chrome nicht ändern.

Answer 3

Ich hatte das gleiche Problem (nach dem Setzen des Fokus durch RJS/Prototyp) im IE. Firefox ließ den Cursor bereits am Ende stehen, wenn es bereits einen Wert für das Feld gab. Der IE zwang den Cursor an den Anfang des Textes.

Die Lösung, die ich gefunden habe, lautet wie folgt:

<input id="search" type="text" value="mycurrtext" size="30" 
       onfocus="this.value = this.value;" name="search"/>

Dies funktioniert sowohl im IE7 als auch im FF3

Answer 4

Nachdem ich ein wenig damit herumgespielt hatte, fand ich heraus, dass der beste Weg die Verwendung der setSelectionRange Funktion, wenn der Browser sie unterstützt; falls nicht, verwenden Sie die Methode aus der Antwort von Mike Berrow (d.h. ersetzen Sie den Wert durch sich selbst).

Ich setze auch scrollTop auf einen hohen Wert setzen, falls wir uns in einem vertikal scrollbaren textarea . (Die Verwendung eines willkürlich hohen Wertes scheint zuverlässiger zu sein als $(this).height() in Firefox und Chrome).

Ich habe es ist als ein jQuery-Plugin gemacht. (Wenn Sie nicht mit jQuery Ich vertraue darauf, dass Sie immer noch die Quintessenz leicht genug bekommen können.)

Ich habe in IE6, IE7, IE8, Firefox 3.5.5, Google Chrome 3.0, Safari 4.0.4, Opera 10.00 getestet.

Es ist auf jquery.com verfügbar als das PutCursorAtEnd-Plugin . Der Code für die Version 1.0 sieht wie folgt aus:

// jQuery plugin: PutCursorAtEnd 1.0
// http://plugins.jquery.com/project/PutCursorAtEnd
// by teedyay
//
// Puts the cursor at the end of a textbox/ textarea

// codesnippet: 691e18b1-f4f9-41b4-8fe8-bc8ee51b48d4
(function($)
{
    jQuery.fn.putCursorAtEnd = function()
    {
    return this.each(function()
    {
        $(this).focus()

        // If this function exists...
        if (this.setSelectionRange)
        {
        // ... then use it
        // (Doesn't work in IE)

        // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
        var len = $(this).val().length * 2;
        this.setSelectionRange(len, len);
        }
        else
        {
        // ... otherwise replace the contents with itself
        // (Doesn't work in Google Chrome)
        $(this).val($(this).val());
        }

        // Scroll to the bottom, in case we're in a tall textarea
        // (Necessary for Firefox and Google Chrome)
        this.scrollTop = 999999;
    });
    };
})(jQuery);

Answer 5

el.setSelectionRange(-1, -1);

https://codesandbox.io/s/peaceful-bash-x2mti

Diese Methode aktualisiert die HTMLInputElement.selectionStart, selectionEnd, und selectionDirection Eigenschaften in einem Aufruf.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange

In anderen js-Methoden -1 bedeutet normalerweise (bis zum) letzten Zeichen. Dies ist auch hier der Fall, aber ich konnte keine ausdrückliche Erwähnung dieses Verhaltens in der Dokumentation finden.