Wie kann man die Caret-Position in einem ContentEditable-Element programmgesteuert festlegen?

Festlegen der Caret-Position in einem inhaltsbearbeitbaren Element

Das Festlegen der Caret-Position in einem inhaltsbearbeitbaren Div kann mithilfe der Range- und Selection-Objekte erreicht werden. So setzen Sie die Einfügemarke auf eine bestimmte Position innerhalb des Elements:

Code:

function setCaret() {
    var el = document.getElementById("editable")
    var range = document.createRange()
    var sel = window.getSelection()
    
    range.setStart(el.childNodes[2], 5)
    range.collapse(true)
    
    sel.removeAllRanges()
    sel.addRange(range)
}

Erklärung:

• el stellt das inhaltsbearbeitbare Element dar.
• range ist das Range-Objekt, das zur Angabe der Cursorposition verwendet wird.
• sel ist das Selection-Objekt, das zur Manipulation verwendet wird die Auswahl.
• setStart() setzt den Anfang des Bereichs auf den angegebenen Knoten und Offset (el.childNodes[2] bzw. 5).
• collapse() reduziert den Bereich auf ein einzelner Punkt an der Startposition.
• removeAllRanges() entfernt alle vorhandenen Auswahlen.
• addRange() fügt den erstellten Bereich hinzu die Auswahl.

Beispiel:

Bedenken Sie den folgenden HTML-Code:

<div>

Wenn Sie auf die Schaltfläche „Fokus“ klicken, wird die JavaScript-Funktion setCaret() angezeigt aufgerufen und das Caretzeichen am fünften Zeichen der zweiten Textzeile platziert.

Das obige ist der detaillierte Inhalt vonWie kann man die Caret-Position in einem ContentEditable-Element programmgesteuert festlegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!