Wie kann man die Cursorposition in einem ContentEditable Div festlegen und beibehalten?

Cursorposition auf contentEditable <div> festlegen

Beim Umgang mit einem contentEditable <div> setzt die Standardbrowserfunktionalität die Cursorposition auf den Anfang des Textes zurück wenn man den Fokus wiedererlangt. Um dieses Problem zu beheben, ziehen Sie die folgende Lösung in Betracht:

Cursorposition speichern und wiederherstellen:

1. Aktuelle Position speichern: Im onmouseup und onkeyup-Ereignisse, speichern Sie die aktuelle Cursorposition in einer Variablen, savingRange.
2. Wiederherstellen Position:Stellen Sie im Onfocus-Ereignis die gespeicherte Auswahl aus „savedRange“ wieder her.

Dieser Ansatz stellt sicher, dass der Cursor an der letzten bekannten Position positioniert wird, wenn das Div den Fokus wiedererlangt.

Umgang mit Klicks:

Um die Auswahl beim Klicken auf das Div wiederherzustellen, sind die folgenden zusätzlichen Schritte erforderlich notwendig:

1. Klickereignisse abbrechen: cancelEvent() an die Ereignisse onclick und onmousedown anhängen. Diese Funktion verhindert das Standardverhalten dieser Ereignisse und ruft „restoreSelection()“ auf.
2. Fokusstatus verfolgen: Verwenden Sie die Variable isInFocus, um zu bestimmen, ob das Div im Fokus ist. Brechen Sie Klickereignisse nur ab, wenn das Div nicht im Fokus ist.

Arbeitscode:

<div>

var savedRange, isInFocus;

function saveSelection() {
  savedRange = window.getSelection ? window.getSelection().getRangeAt(0) : document.selection.createRange();
}

function restoreSelection() {
  isInFocus = true;
  document.getElementById("area").focus();

  if (savedRange) {
    if (window.getSelection) {
      var s = window.getSelection();
      s.removeAllRanges();
      s.addRange(savedRange);
    } else if (document.createRange) {
      window.getSelection().addRange(savedRange);
    } else if (document.selection) {
      savedRange.select();
    }
  }
}

function onDivBlur() {
  isInFocus = false;
}

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

Das obige ist der detaillierte Inhalt vonWie kann man die Cursorposition in einem ContentEditable Div festlegen und beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!