Wie kann verhindert werden, dass der Cursor an den Anfang eines ContentEditable-Objekts zurückgesetzt wird?-js-Tutorial-php.cn

How to Prevent the Cursor from Resetting to the Beginning of a ContentEditable ``?

Cursorposition auf ContentEditable

festlegen

Beim Arbeiten mit einem contentEditable='on'

kommt es häufig vor Ich stoße auf das Problem, dass der Cursor nach Wiederherstellung des Fokus wieder an den Textanfang zurückkehrt. Um dieses Problem anzugehen, wurde eine browserübergreifende Lösung entwickelt.

Lösung:

1. Cursorposition speichern:

function saveSelection() {
  if (window.getSelection) { // non-IE
    savedRange = window.getSelection().getRangeAt(0);
  } else if (document.selection) { // IE
    savedRange = document.selection.createRange();
  }
}

Nach dem Login kopieren

Diese Funktion wird an die Ereignisse onmouseup und onkeyup des

angehängt. und speichert die aktuelle Auswahl in der Variable „savedRange“.

2. Cursorposition wiederherstellen:

function restoreSelection() {
  if (savedRange != null) {
    if (window.getSelection) { // non-IE
      var s = window.getSelection();
      s.removeAllRanges();
      s.addRange(savedRange);
    } else if (document.createRange) { // non-IE
      window.getSelection().addRange(savedRange);
    } else if (document.selection) { // IE
      savedRange.select();
    }
  }
}

Nach dem Login kopieren

Diese Funktion wird an das Onfocus-Ereignis des

angehängt. und stellt die in „savedRange“ gespeicherte Auswahl wieder her.

3. Klickereignisse verhindern (optional):

Wenn Sie möchten, dass der Cursor beim Klicken wiederhergestellt wird, anstatt auf den Anfang zurückgesetzt zu werden, können Sie die folgenden Funktionen verwenden:

var isInFocus = false;

function onDivBlur() {
  isInFocus = false;
}

function cancelEvent(e) {
  if (isInFocus == false &amp;&amp; savedRange != null) {
    e.stopPropagation();
    e.preventDefault();
    restoreSelection();
    return false;
  }
}

Nach dem Login kopieren

Diese Funktionen werden an die Ereignisse onblur, onclick und onmousedown angehängt und verhindern, dass das Click-Ereignis die Cursorposition zurücksetzt. Sie stellen außerdem die Auswahl wieder her und stellen sicher, dass der Cursor dort platziert wird, wo er aufgehört hat.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass der Cursor an den Anfang eines ContentEditable-Objekts zurückgesetzt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：php.cn

Vorheriger Artikel：Wie handhaben Sie den asynchronen Datenabruf in Schleifen und stellen sicher, dass alle Abfragen abgeschlossen sind, bevor ein zusammenhängender Datensatz zurückgegeben wird? Nächster Artikel：Erstellen einer SaaS-Plattform (Software as a Service) mithilfe des MERN-Stacks

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

1894

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

2057

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

1729

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