In HTML werden Eingabefelder verwendet, um Eingaben vom Benutzer zu erhalten. Manchmal benötigen wir eine Zeichenfolge oder eine lange Textnachricht in der Eingabe. In diesen Szenarien muss der Benutzer möglicherweise zum Ende des Eingabefelds gehen, um weitere Inhalte oder Nachrichten hinzuzufügen. Wir sollten also etwas einrichten, damit der Benutzer auf die Schaltfläche klicken und zum Ende des Eingabefelds gelangen kann. In diesem Tutorial lernen wir, wie man mit JavaScript den Cursor am Ende des Textes in einem Eingabefeld positioniert.
setSelectionRange() wird verwendet, um Text im Eingabefeld auszuwählen. Zum Starten und Beenden der Auswahl sind zwei Parameter erforderlich. Wir können das letzte Zeichen mit der Methode setSelectionRange() auswählen und den Cursor am Ende des Textes platzieren.
Benutzer können die Methode setSelectionRange() gemäß der folgenden Syntax verwenden, um den Cursor am Ende des Textes zu platzieren.
input.setSelectionRange(len, len);
In der obigen Syntax ist die Eingabe das HTML-Element, auf das wir in JavaScript zugreifen. „len“ ist die Länge des Eingabewerts.
Im folgenden Beispiel haben wir Eingabefelder und Schaltflächen erstellt. Wenn der Benutzer auf die Schaltfläche klickt, führt er die Funktion moveAtend() aus.
In JavaScript haben wir die Funktion moveAtend() definiert, die auf das Eingabefeld „Name“ zugreift. Anschließend wird mithilfe der Methode focus() der Fokus auf das Eingabefeld gesetzt. Danach verwenden wir die Methode setSelectionRange(), indem wir die Länge des Eingabewerts als zwei Parameter übergeben. In der Ausgabe kann der Benutzer auf die Schaltfläche klicken und beobachten, wie die Cursorposition an das Ende des Textes gesetzt wird.
<html>
<body>
<h3> Using the <i> setSelectionRange() method </i> to move the cursor at the end of the input field in JavaScript </h3>
<input type = "text" id = "name" value = "Shubham">
<button onclick = "moveAtend()"> Move cursor at end </button>
<script>
let output = document.getElementById("output");
function moveAtend() {
let name = document.getElementById("name");
name.focus();
name.setSelectionRange(name.value.length, name.value.length);
}
</script>
</html>
Die CSS-Eigenschaften „selectionStart“ und „selectionEnd“ werden verwendet, um Eingabewerte in Eingabefeldern auszuwählen. „selectionStart“ nimmt den Indexwert an, an dem wir mit der Auswahl begonnen haben, und „selectionEnd“ nimmt den Indexwert an, an dem wir die Textauswahl beenden müssen.
Hier können wir den Wert der Eigenschaften „selectionStart“ und „selectionEnd“ gleich der Textlänge festlegen, um den Cursor am Ende des Textes zu positionieren.
Benutzer können die Eigenschaften „selectionStart“ und „selectionEnd“ verwenden, um den Cursor mithilfe der folgenden Syntax am Ende des Textes zu platzieren.
input.selectionStart = len; input.selectionEnd = len;
In der obigen Syntax ist die Eingabe ein HTML-Element und „len“ ist die Länge seines Werts.
Wie im ersten Beispiel erstellen wir im folgenden Beispiel die Eingabefelder. In der Funktion moveAtend() setzen wir den Wert der Eigenschaften „selectionStart“ und „selectionEnd“ gleich der Textlänge des Eingabefelds „name“.
<html>
<body>
<h3> Using the <i> selectionStart and selectionEnd Properties </i> to move the cursor at the end of the input field in JavaScript </h3>
<input type = "text" id = "name" value = "Shubham">
<button onclick = "moveAtend()"> Move cursor at end </button>
<script>
let output = document.getElementById("output");
function moveAtend() {
let name = document.getElementById("name");
name.focus();
name.selectionStart = name.value.length;
name.selectionEnd = name.value.length;
}
</script>
</html>
Wir haben zwei Möglichkeiten kennengelernt, den Cursor am Ende eines Textwerts in einem Eingabefeld zu positionieren. In der ersten Methode haben wir die Methode setSelectionRange() verwendet; in der zweiten Methode haben wir die Eigenschaften „selectionStart“ und „selectionEnd“ verwendet. Allerdings sind beide Methoden nahezu identisch, die Methode setSelectionRange() übernimmt die Endwerte „selectionStart“ und „selection“ als Parameter.
Das obige ist der detaillierte Inhalt vonWie positioniere ich den Cursor mit JavaScript am Ende des Textes in einem Texteingabefeld?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Unterschied zwischen Linux und Windows
Was ist mit dem Absturz von Douyin los?
jquery animieren
Einführung in die Hauptarbeitsinhalte des Backends
Eine vollständige Liste der Tastenkombinationen für Ideen
Eine Sammlung häufig verwendeter Computerbefehle
Warum schlägt die Win10-Aktivierung fehl?
Was ist Weidian?
