suchen

Heim >Web-Frontend >js-Tutorial >Wie kann verhindert werden, dass der Cursor an den Anfang eines ContentEditable-Objekts zurückgesetzt wird?

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

Barbara Streisand
Barbara StreisandOriginal
2024-11-10 16:07:021080Durchsuche

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

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

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 && savedRange != null) {
    e.stopPropagation();
    e.preventDefault();
    restoreSelection();
    return false;
  }
}

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!

if Event function this 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：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：Wie handhaben Sie den asynchronen Datenabruf in Schleifen und stellen sicher, dass alle Abfragen abgeschlossen sind, bevor ein zusammenhängender Datensatz zurückgegeben wird?

In Verbindung stehende Artikel

Mehr sehen