Wie kann ich die Caret-Position in einem ContentEditable-Div genau festlegen?

Einfügen der Caret-Position in einem inhaltsbearbeitbaren Element

Das Ziel, das Caret an einer genauen Stelle innerhalb eines inhaltsbearbeitbaren div-Elements festzulegen, kann eine herausfordernde Aufgabe sein . Wenn Sie Hilfe von der Online-Community suchen, sind Sie möglicherweise auf eine JavaScript-Lösung gestoßen, die der folgenden ähnelt:

const range = document.createRange();
const myDiv = document.getElementById("editable");
range.setStart(myDiv, 5);
range.setEnd(myDiv, 5);

Obwohl dieser Ansatz im Wissensspeicher des Webs vorhanden ist, hat er sich sowohl in Firefox als auch in Chrome als unwirksam erwiesen .

Umfassen der Reichweite und Auswahlobjekte

Um die Situation zu korrigieren und das Potenzial der zu erschließen Bereichs- und Auswahlobjekte sind von entscheidender Bedeutung. Diese Objekte dienen als Torwächter zur genauen Steuerung der Platzierung des Caretzeichens.

Um ihre Anwendung zu veranschaulichen, verschieben wir das Caretzeichen auf das fünfte Zeichen der zweiten Textzeile. So kann dies erreicht werden:

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)
}

HTML-Implementierung

Um diese Lösung vollständig zu integrieren, integrieren Sie den folgenden HTML-Code in Ihren Code:

<div>

Bei dieser Implementierung wird das Caret durch Klicken auf die Schaltfläche passend innerhalb des bearbeitbaren Div positioniert, sodass Sie eine genaue Kontrolle darüber haben Platzierung.

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