Ich habe dieses einfache HTML als Beispiel:
<div id="editable" contenteditable="true">
text text text<br>
text text text<br>
text text text<br>
</div>
<button id="button">focus</button>
Ich möchte eine einfache Sache - wenn ich auf die Schaltfläche klicke, möchte ich Caret (Cursor) an einer bestimmten Stelle im bearbeitbaren Div platzieren. Bei der Suche über das Internet habe ich diese JS an den Klick auf eine Schaltfläche angehängt, aber sie funktioniert nicht (FF, Chrome):
var range = document.createRange();
var myDiv = document.getElementById("editable");
range.setStart(myDiv, 5);
range.setEnd(myDiv, 5);
Ist es möglich, die Caret-Position so manuell einzustellen?
setSelectionRange()
Funktion aus der Antwort verwenden, die ich hier geschrieben habe: stackoverflow.com/questions/6240139/… . Wie ich in der Antwort bemerkt habe, gibt es verschiedene Dinge, die nicht richtig / konsistent gehandhabt werden, aber es kann gut genug sein.document.createRange
(oderwindow.getSelection
, aber es wird nicht so weit kommen).Die meisten Antworten, die Sie zur inhaltsbearbeitbaren Cursorpositionierung finden, sind ziemlich simpel, da sie nur Eingaben mit einfachem Vanille-Text ermöglichen. Sobald Sie HTML-Elemente im Container verwenden, wird der eingegebene Text in Knoten aufgeteilt und großzügig über eine Baumstruktur verteilt.
Um die Cursorposition zu setzen, habe ich diese Funktion, die alle untergeordneten Textknoten innerhalb des angegebenen Knotens umkreist und einen Bereich vom Anfang des Anfangsknotens bis zum Zeichen chars.count festlegt :
Ich rufe dann die Routine mit dieser Funktion auf:
Der range.collapse (false) setzt den Cursor auf das Ende des Bereichs. Ich habe es mit den neuesten Versionen von Chrome, IE, Mozilla und Opera getestet und alle funktionieren einwandfrei.
PS. Wenn jemand interessiert ist, erhalte ich die aktuelle Cursorposition mit diesem Code:
Der Code macht das Gegenteil der Set-Funktion - er ruft das aktuelle window.getSelection (). FocusNode und focusOffset ab und zählt alle gefundenen Textzeichen rückwärts, bis er auf einen übergeordneten Knoten mit der ID containerId trifft. Die Funktion isChildOf prüft vor dem Ausführen, ob der angegebene Knoten tatsächlich ein untergeordnetes Element der angegebenen übergeordneten ID ist .
Der Code sollte ohne Änderung direkt funktionieren, aber ich habe ihn gerade aus einem von mir entwickelten jQuery-Plugin übernommen und ein paar davon gehackt - lassen Sie mich wissen, wenn etwas nicht funktioniert!
quelle
node.id
undparentId
beziehen sich auf ohne Beispiel. Danke :)Wenn Sie jQuery nicht verwenden möchten, können Sie diesen Ansatz ausprobieren:
editableDiv
Wenn Sie ein bearbeitbares Element haben, vergessen Sie nicht, ein Element dafür festzulegenid
. Dann müssen Sie IhreinnerHTML
aus dem Element holen und alle Bremsleitungen abschneiden. Und setzen Sie einfach den Zusammenbruch mit den nächsten Argumenten.quelle
quelle
Es ist sehr schwer, Caret in die richtige Position zu bringen, wenn Sie ein fortgeschrittenes Element wie (p) (span) usw. haben. Das Ziel ist es, (Objekttext) zu erhalten:
quelle
Ich schreibe einen Syntax-Textmarker (und einen grundlegenden Code-Editor) und musste wissen, wie man ein Zeichen in einfachen Anführungszeichen automatisch eingibt und das Caret zurückschiebt (wie heutzutage viele Code-Editoren).
Hier ist ein Ausschnitt meiner Lösung, dank viel Hilfe von diesem Thread, den MDN-Dokumenten und viel Moz Console Watching.
Dies ist in einem inhaltsbearbeitbaren div-Element
Ich lasse dies hier als Dank, da mir klar wird, dass es bereits eine akzeptierte Antwort gibt.
quelle
Ich habe das für meinen einfachen Texteditor gemacht.
Unterschiede zu anderen Methoden:
Verwendung
Auswahl.ts
quelle
Ich denke, es ist nicht einfach, Caret auf eine Position in einem inhaltsbearbeitbaren Element zu setzen. Ich habe meinen eigenen Code dafür geschrieben. Es umgeht den Knotenbaum, der berechnet, wie viele Zeichen noch übrig sind, und setzt Caret in das benötigte Element. Ich habe diesen Code nicht viel getestet.
Ich habe auch Code geschrieben, um die aktuelle Caret-Position zu erhalten (nicht getestet):
Sie müssen sich auch darüber im Klaren sein, dass range.startOffset und range.endOffset einen Zeichenversatz für Textknoten (nodeType === 3) und einen untergeordneten Knotenversatz für Elementknoten (nodeType === 1) enthalten. range.startContainer und range.endContainer können sich auf jeden Elementknoten einer beliebigen Ebene im Baum beziehen (natürlich können sie sich auch auf Textknoten beziehen).
quelle
Basierend auf der Antwort von Tim Down, aber es wird nach der letzten bekannten "guten" Textzeile gesucht. Der Cursor befindet sich ganz am Ende.
Außerdem könnte ich das letzte Kind jedes aufeinanderfolgenden letzten Kindes rekursiv / iterativ überprüfen, um den absolut letzten "guten" Textknoten im DOM zu finden.
quelle