suchen

Heim >Web-Frontend >js-Tutorial >Wie behalte ich die Cursorposition in einem ContentEditable „browserübergreifend' bei?

Wie behalte ich die Cursorposition in einem ContentEditable „browserübergreifend' bei?

Linda Hamilton
Linda HamiltonOriginal
2024-11-10 14:54:03190Durchsuche

How to Retain Cursor Position in a ContentEditable `` Across Browsers?

Cursorposition auf ContentEditable

festlegen

Cursorposition innerhalb eines ContentEditable

festlegen kann in verschiedenen Browsern eine Herausforderung darstellen. Das Standardverhalten platziert den Cursor normalerweise am Anfang des Textes, unabhängig von der letzten bekannten Position. Um diese Herausforderung zu meistern, ist eine maßgeschneiderte Lösung erforderlich.

Browserübergreifende Lösung

Um dieses Problem zu beheben, ziehen Sie die folgende Lösung in Betracht:

  • Speichern Sie die aktuelle Cursorposition, wenn der Fokus verloren geht, mit der Funktion saveSelection().
  • Stellen Sie die Auswahl wieder her, wenn der Fokus wiedererlangt wird unter Verwendung der Funktion „restoreSelection()“.
function saveSelection() {
    if (window.getSelection) {
        savedRange = window.getSelection().getRangeAt(0);
    } else if (document.selection) { 
        savedRange = document.selection.createRange();  
    } 
}

function restoreSelection() {
    document.getElementById("area").focus();
    if (savedRange != null) {
        if (window.getSelection) {
            var s = window.getSelection();
            if (s.rangeCount > 0) 
                s.removeAllRanges();
            s.addRange(savedRange);
        } else if (document.createRange) {
            window.getSelection().addRange(savedRange);
        } else if (document.selection) {
            savedRange.select();
        }
    }
}

Klicken Sie auf „Ereignisbehandlung“ (optional)

Standardmäßig wird beim Klicken innerhalb des InhaltsEditable

bewegt den Cursor an die angeklickte Stelle. Wenn Sie es vorziehen, die gespeicherte Cursorposition auch beim Klicken beizubehalten, brechen Sie die Ereignisse onclick und onmousedown mit der folgenden Funktion ab:

function cancelEvent(e) {
    if (isInFocus == false && savedRange != null) {
        if (e && e.preventDefault) {
            e.stopPropagation();
            e.preventDefault();
        }
        else {
            window.event.cancelBubble = true;
        }
        restoreSelection();
        return false;
    }
}

Verwendung

Integrieren Sie diese Funktionen in Sie können Ihren Code erweitern, indem Sie saveSelection() an die Ereignisse onmouseup und onkeyup des

und restaurierenSelection() an das Ereignis onfocus anhängen. Fügen Sie optional die Funktion cancelEvent() an die Ereignisse onclick und onmousedown an, um die Cursorposition bei Klicks beizubehalten.

Diese Lösung bietet einen umfassenden und browserübergreifenden Ansatz, um die Cursorposition innerhalb von contentEditable

beizubehalten. Elemente, die das Benutzererlebnis bei der Arbeit mit bearbeitbaren Bereichen verbessern.

Das obige ist der detaillierte Inhalt vonWie behalte ich die Cursorposition in einem ContentEditable „browserübergreifend' bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

if using Event function default this location position issue
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ist „.then(function(a){ return a; })“ ein No-Op in Promises?Nächster Artikel：Ist „.then(function(a){ return a; })“ ein No-Op in Promises?

In Verbindung stehende Artikel

Mehr sehen