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

<script type="text/javascript">  
    function SetEnd(txt) {  
      if (txt.createTextRange) {  
       //IE  
       var FieldRange = txt.createTextRange();  
       FieldRange.moveStart('character', txt.value.length);  
       FieldRange.collapse();  
       FieldRange.select();  
       }  
      else {  
       //Firefox and Opera  
       txt.focus();  
       var length = txt.value.length;  
       txt.setSelectionRange(length, length);  
      }  
    }   
</script>  

Diese Funktion funktioniert bei mir im IE9, Firefox 6.x und Opera 11.x

Answer 2

Wir schreiben das Jahr 2019, und keine der oben genannten Methoden hat bei mir funktioniert, aber diese hier schon, die aus https://css-tricks.com/snippets/javascript/move-cursor-to-end-of-input/

function moveCursorToEnd(id) {
  var el = document.getElementById(id) 
  el.focus()
  if (typeof el.selectionStart == "number") {
      el.selectionStart = el.selectionEnd = el.value.length;
  } else if (typeof el.createTextRange != "undefined") {           
      var range = el.createTextRange();
      range.collapse(false);
      range.select();
  }
}

<input id="myinput" type="text" />
<a href="#" onclick="moveCursorToEnd('myinput')">Move cursor to end</a>

Answer 3

Ich habe Folgendes mit recht großem Erfolg in Chrome ausprobiert

$("input.focus").focus(function () {
    var val = this.value,
        $this = $(this);
    $this.val("");

    setTimeout(function () {
        $this.val(val);
    }, 1);
});

Kurzer Rückblick:

Es nimmt jedes Eingabefeld, auf dem der Klassenfokus liegt, speichert dann den alten Wert des Eingabefeldes in einer Variablen und wendet anschließend den leeren String auf das Eingabefeld an.

Dann wartet es 1 Millisekunde und setzt den alten Wert wieder ein.

Answer 4

const end = input.value.length

input.setSelectionRange(end, end)
//  scroll to the bottom if a textarea has long text
input.focus()

Answer 5

Einfach. Wenn Sie Werte bearbeiten oder ändern, setzen Sie zuerst den Fokus und dann den Wert.

$("#catg_name").focus();
$("#catg_name").val(catg_name);