Wie positioniere ich den Cursor mit JavaScript am Ende des Textes in einem Texteingabefeld?-js-Tutorial-php.cn

Wie positioniere ich den Cursor mit JavaScript am Ende des Textes in einem Texteingabefeld?

王林

Freigeben： 2023-08-27 14:09:17

nach vorne

1261 Leute haben es durchsucht

如何使用 JavaScript 将光标位置放置在文本输入字段中的文本末尾？

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.

Verwenden Sie die setSelectionRange()-Methode

Die Methode

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.

Grammatik

Benutzer können die Methode setSelectionRange() gemäß der folgenden Syntax verwenden, um den Cursor am Ende des Textes zu platzieren.

input.setSelectionRange(len, len);

Nach dem Login kopieren

In der obigen Syntax ist die Eingabe das HTML-Element, auf das wir in JavaScript zugreifen. „len“ ist die Länge des Eingabewerts.

Beispiel

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>

Nach dem Login kopieren

Verwenden Sie die Eigenschaften „selectionStart“ und „selectionEnd“

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.

Grammatik

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;

Nach dem Login kopieren

In der obigen Syntax ist die Eingabe ein HTML-Element und „len“ ist die Länge seines Werts.

Beispiel

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>

Nach dem Login kopieren

Fazit

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!