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

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!