Wie setze ich die Position des Caret (Cursor) im contenteditable Element (div)?

Meisten Antworten finden Sie auf contenteditable cursor-Positionierung sind ziemlich simpel, dass Sie nur gerecht für Eingänge mit plain-vanilla-text. Sobald Sie die Verwendung der html-Elemente innerhalb des Containers der eingegebene text wird aufgeteilt in Knoten und verteilt großzügig über eine Baumstruktur.

Festlegen der cursor-position habe ich diese Funktion, die Schleifen Runden alle child-text-nodes innerhalb der mitgelieferten Knoten und legt eine Reihe aus der start der ersten Knoten an der chars.Graf Charakter:

function createRange(node, chars, range) {
    if (!range) {
        range = document.createRange()
        range.selectNode(node);
        range.setStart(node, 0);
    }

    if (chars.count === 0) {
        range.setEnd(node, chars.count);
    } else if (node && chars.count >0) {
        if (node.nodeType === Node.TEXT_NODE) {
            if (node.textContent.length < chars.count) {
                chars.count -= node.textContent.length;
            } else {
                range.setEnd(node, chars.count);
                chars.count = 0;
            }
        } else {
           for (var lp = 0; lp < node.childNodes.length; lp++) {
                range = createRange(node.childNodes[lp], chars, range);

                if (chars.count === 0) {
                    break;
                }
            }
        }
    } 

    return range;
};

Ich dann Aufruf der routine mit dieser Funktion:

function setCurrentCursorPosition(chars) {
    if (chars >= 0) {
        var selection = window.getSelection();

        range = createRange(document.getElementById("test").parentNode, { count: chars });

        if (range) {
            range.collapse(false);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }
};

Bereich.collapse(false) setzt den cursor an das Ende der Reihe. Ich habe es getestet mit den neuesten Versionen von Chrome, IE, Mozilla und Opera, und Sie alle gut funktionieren.

PS. Wenn jemand interessiert ist, ich bekomme die aktuelle cursor-position mit diesem code:

function isChildOf(node, parentId) {
    while (node !== null) {
        if (node.id === parentId) {
            return true;
        }
        node = node.parentNode;
    }

    return false;
};

function getCurrentCursorPosition(parentId) {
    var selection = window.getSelection(),
        charCount = -1,
        node;

    if (selection.focusNode) {
        if (isChildOf(selection.focusNode, parentId)) {
            node = selection.focusNode; 
            charCount = selection.focusOffset;

            while (node) {
                if (node.id === parentId) {
                    break;
                }

                if (node.previousSibling) {
                    node = node.previousSibling;
                    charCount += node.textContent.length;
                } else {
                     node = node.parentNode;
                     if (node === null) {
                         break
                     }
                }
           }
      }
   }

    return charCount;
};

Code bewirkt das Gegenteil der set-Funktion - es wird das aktuelle Fenster.getSelection().focusNode und focusOffset und rückwärts zählt alle text-Zeichen angetroffen, bis es auf einem übergeordneten Knoten mit id containerId. Die isChildOf-Funktion prüft vor der Ausführung, dass die suplied Knoten ist eigentlich ein Kind der gelieferten parentId.

Sollte der code funktionieren gerade ohne ändern, aber ich habe nur genommen aus einem jQuery-plugin habe ich entwickelt hat, so haben ausgehackt ein paar dies ist - lassen Sie mich wissen, wenn etwas nicht funktioniert!

InformationsquelleAutor der Antwort Liam

Wenn du nicht jQuery verwenden möchten, können Sie versuchen, diesen Ansatz:

public setCaretPosition() {
    const editableDiv = document.getElementById('contenteditablediv');
    const lastLine = this.input.nativeElement.innerHTML.replace(/.*?(<br>)/g, '');
    const selection = window.getSelection();
    selection.collapse(editableDiv.childNodes[editableDiv.childNodes.length - 1], lastLine.length);
}

editableDiv Sie editierbare element, vergessen Sie nicht, um ein id. Dann brauchen Sie, um Ihre innerHTML aus dem element und schneiden Sie alle Bremse Linien. Und setzen Sie einfach nach dem Zusammenbruch nächsten Argumente.

InformationsquelleAutor der Antwort Volodymyr Khmil