js positioniert den Cursor an der angegebenen Position des Eingabefelds, um ein Beispiel zu teilen

Bei der Bereitstellung einer benutzerfreundlichen Benutzeroberfläche ist es häufig erforderlich, den Cursor an der angegebenen Position des Eingabefelds zu positionieren. Normalerweise der Schwanz, damit der Benutzer weiterhin Informationen eingeben kann. Wir können Javascript verwenden, um dom zu betreiben. Das Folgende ist die Implementierungsmethode

   function changeCursor(input, position) {   
2.             var range = input.createTextRange();   
3.             range.collapse(true);   
4.             range.moveStart('character', position);   
5.             range.select();   
6.       }  
7.       //在需要的地方调用此函数，比如 
8.       onfocus="positionCursor(this, this.length)"
functionchangeCursor(input, position) {  
      var range = input.createTextRange();  
      range.collapse(true);  
      range.moveStart('character',position);  
      range.select();  
}

//Rufen Sie diese Funktion bei Bedarf auf, z. B.

onfocus="positionCursor(this,this.length)"

wobei createTextRange ein TextRange-Objekt

für das Element erstellt

Die folgende Tabelle listet die Eigenschaften und Methoden des TextRange -Objekts auf. Darüber hinaus können Sie auf verweisen w3c Dokumentation für
MethodeBeschreibung
compareEndPoints : Vergleichen TextRange Der Endpunkt des Objekts und die Endpunkte anderer Bereiche.
duplicate : Gibt eine Kopie von TextRange zurück.
execCommand : Führt einen Befehl für das aktuelle Dokument, die aktuelle Auswahl oder einen bestimmten Bereich aus.
erweitern : Erweitern Sie den Bereich, sodass er den gesamten Bereich der angegebenen Einheit umfasst.
findText : Suchen Sie nach Text im Text und legen Sie die Start- und Endpunkte des Bereichs so fest, dass sie die Suchzeichenfolge umgeben.
getBookmark: ruft das Lesezeichen ab, mit dem moveToBookmark denselben Bereich zurückgeben kann Lesezeichen (Weiße Hintergrundzeichenfolge).
getBoundingClientRect: Ruft das Objekt ab, das an die angegebene Objektsammlung TextRectangle gebunden ist.
getClientRects: Rufen Sie eine Sammlung von Rechtecken ab, die den Inhalt des Objekts oder das Layout innerhalb des Clientbereichs beschreiben. Jedes Rechteck beschreibt eine gerade Linie.
inRange : Gibt zurück, ob ein Bereich in einem anderen Bereich enthalten ist.
isEqual : Gibt zurück, ob der angegebene Bereich gleich dem aktuellen Bereich ist.
move : Reduziert den angegebenen Textbereich und verschiebt den leeren Bereich um die angegebene Anzahl von Einheiten.
moveEnd: Ändern Sie die Endposition des Bereichs.
moveStart : Ändern Sie die Startposition des Bereichs.
moveToBookmark: In Lesezeichen verschieben.
moveToElementText: Verschiebt den Textbereich so, dass die Start- und Endpositionen des Bereichs vollständig den Text des angegebenen Elements enthalten.
moveToPoint : Verschiebt die Start- und Endposition des Textbereichs an den angegebenen Punkt.
parentElement : Ruft das übergeordnete Element des angegebenen Textbereichs ab.
pasteHTML : Fügen Sie HTML--Text in den angegebenen Textbereich ein und ersetzen Sie dabei sämtlichen vorherigen Text im Bereich und HTML -Element.
queryCommandEnabled: Gibt zurück, ob der angegebene Befehl im aktuellen Status des angegebenen Dokuments verwendet werden kann execCommand Boolescher Wert für erfolgreiche Befehlsausführung.
queryCommandIndeterm : Gibt einen booleschen -Wert zurück, der angibt, ob sich der angegebene Befehl in einem mehrdeutigen Zustand befindet.
queryCommandState : Gibt einen Booleschen -Wert zurück, der den aktuellen Status des Befehls angibt.
queryCommandSupported: Gibt einen booleschen -Wert zurück, der angibt, ob der aktuelle Befehl im aktuellen Gebietsschema unterstützt wird .
queryCommandValue: Gibt den aktuellen Wert des Dokuments, Bereichs oder aktuell ausgewählten Bereichs für den angegebenen Befehl zurück.
scrollIntoView: Scrollt das Objekt in den sichtbaren Bereich und ordnet es oben oder unten im Fenster an.
auswählen : Aktuellen Auswahlbereich als aktuelles Objekt festlegen.
setEndPoint: Setzt den Endpunkt eines Bereichs basierend auf den Endpunkten anderer Bereiche.

EigenschaftBeschreibung
boundingHeight: Bindung abrufen TextRange Die Höhe des Objektrechtecks.
boundingLeft : Ermittelt den linken Rand des Rechtecks ​​des umgrenzenden TextRange -Objekts und des enthaltenden TextRange Der Abstand zwischen den linken Seiten der Objekte.
boundingTop : Ermitteln Sie den oberen Rand des umgrenzenden TextRange -Objekts und enthalten Sie den TextRange Der Abstand zwischen den Oberkanten von Objekten.
boundingWidth ：Ruft die Breite des Rechtecks ​​ab, das das TextRange-Objekt begrenzt.
htmlText ：Bindung abrufenTextRange Die Breite des Rechtecks ​​des Objekts.
offsetLeft : Ruft die berechnete linke Position des Objekts relativ zum Layout oder den übergeordneten Koordinaten ab, die durch das Attribut offsetParent angegeben werden.
offsetTop : Ruft die berechnete obere Position des Objekts relativ zum Layout oder den übergeordneten Koordinaten ab, die durch das Attribut offsetTop angegeben werden.
Text : Legen Sie den im Bereich enthaltenen Text fest oder rufen Sie ihn ab.

Verwandte Empfehlungen:

So lösen Sie die inkonsistente Anzeige der Cursorgröße im Eingabefeld

Verwenden Sie CSS, um die Eingabecursor-Methode auszublenden

Cursorcodedetails für benutzerdefinierte JavaScript-Textfelder

Das obige ist der detaillierte Inhalt vonjs positioniert den Cursor an der angegebenen Position des Eingabefelds, um ein Beispiel zu teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!