Wie behalte ich die Cursorposition in einem inhaltsbearbeitbaren Div nach dem Fokus bei?

Cursorposition auf ContentEditable <div> festlegen

Problem:

Content editable <div> Elemente neigen dazu, die Cursorposition jedes Mal an den Anfang des Textes zurückzusetzen, wenn der Fokus wiederhergestellt wird. Dies kann unerwünscht sein, wenn der Cursor an seine vorherige Position zurückgesetzt werden muss.

Lösung:

Um dieses Problem zu beheben, kann die folgende browserübergreifende Lösung verwendet werden:

Schritt 1: Auswahl speichern

Ereignis-Listener (onmouseup und onkeyup) anhängen <div> um die aktuelle Cursorposition (savedRange) zu erfassen, wenn die Maustaste losgelassen oder eine Taste losgelassen wird.

Schritt 2: Auswahl wiederherstellen

Schritt 2 ( a): On Focus

Hängen Sie einen Ereignis-Listener (onfocus) an das <div> an. Dadurch wird die zuvor gespeicherte Auswahl wiederhergestellt.

Schritt 2 (b): Beim Klicken (optional)

Um die Auswahl beim Klicken beizubehalten, sind zusätzliche Schritte erforderlich:

• Registrieren Sie Onclick- und Onmousedown-Ereignis-Listener, die das Klickereignis abbrechen (cancelEvent()).
• Innerhalb cancelEvent(), stellen Sie die gespeicherte Auswahl wieder her und setzen Sie isInFocus auf true.
• Bei Unschärfe (onblur) setzen Sie isInFocus auf false.

Vollständigen Code (einschließlich Auswahlwiederherstellung ein). Klicken):

<div>

var savedRange, isInFocus;

function saveSelection() {
  // ... (Selection saving logic as described in Step 1)
}

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

  if (savedRange != null) {
    // ... (Selection restoration logic as described in Step 2)
  }
}

function onDivBlur() {
  isInFocus = false;
}

function cancelEvent(e) {
  if (isInFocus === false && savedRange != null) {
    // ... (Event cancellation logic as described in Step 2 (b))
  }
}

Das obige ist der detaillierte Inhalt vonWie behalte ich die Cursorposition in einem inhaltsbearbeitbaren Div nach dem Fokus bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!