Wie verschiebe ich das Caretzeichen an das Ende eines ContentEditable-Elements?

Manipulieren des Einfügezeichens in inhaltsbearbeitbaren Elementen

Problem: Wie können Sie das Einfügezeichen effizient an das Ende von a verschieben? inhaltsbearbeitbares Element, das das Verhalten im Notizen-Widget von Gmail nachahmt?

StackOverflow bietet Lösungen, die für Eingabeelemente funktionieren, bei inhaltsbearbeitbaren Elementen jedoch fehlschlagen. Dieser Artikel stellt einen maßgeschneiderten Ansatz speziell für inhaltsbearbeitbare Elemente vor.

Lösung:

Für Browser, die inhaltsbearbeitbare Elemente unterstützen, kann die folgende JavaScript-Funktion die gewünschte Caret-Bewegung ausführen:

function setEndOfContenteditable(contentEditableElement) {
    // Determine browser support
    var range, selection;
    if (document.createRange) {
        // Modern browsers
        range = document.createRange();
        range.selectNodeContents(contentEditableElement);
        range.collapse(false); // Collapse to end of range
        selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    } else if (document.selection) {
        // IE 8 and lower
        range = document.body.createTextRange();
        range.moveToElementText(contentEditableElement);
        range.collapse(false); // Collapse to end of range
        range.select();
    }
}

Verwendungsbeispiel:

Um die Einfügemarke an das Ende eines Elements mit der ID „txt1“ zu verschieben:

elem = document.getElementById('txt1');
setEndOfContenteditable(elem);

Das obige ist der detaillierte Inhalt vonWie verschiebe ich das Caretzeichen an das Ende eines ContentEditable-Elements?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!