Wie behalte ich die Cursorposition in einem ContentEditable „browserübergreifend' bei?-js-Tutorial-php.cn

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

Nach dem Login kopieren

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 &amp;&amp; savedRange != null) {
        if (e &amp;&amp; e.preventDefault) {
            e.stopPropagation();
            e.preventDefault();
        }
        else {
            window.event.cancelBubble = true;
        }
        restoreSelection();
        return false;
    }
}

Nach dem Login kopieren

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!

Vorheriger Artikel：Ist „.then(function(a){ return a; })“ ein No-Op in Promises? Nächster Artikel：Wie können Sie HTML-Links in modernen Browsern deaktivieren?

Erklärung dieser Website

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

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2982

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

3200

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

2599

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...