Heim > Web-Frontend > js-Tutorial > Wie behalte ich die Cursorposition in einem ContentEditable bei?

Wie behalte ich die Cursorposition in einem ContentEditable bei?

Barbara Streisand
Freigeben: 2024-11-12 08:59:02
Original
248 Leute haben es durchsucht

How to Maintain Cursor Position in a ContentEditable ``?

Cursorposition in einem ContentEditable

beibehalten

Beim Arbeiten mit Content Editable

Bei Elementen ist es häufig wünschenswert, die Cursorposition beizubehalten, nachdem das Element wieder den Fokus erlangt hat. Standardmäßig setzen Browser den Cursor beim erneuten Fokussieren normalerweise an den Anfang des Textes zurück.

Lösungsübersicht

Um dieses Problem zu lösen, speichern wir die aktuelle Cursorposition wenn das Div den Fokus verliert, und stellen Sie ihn wieder her, wenn es den Fokus wiedererlangt. Hier ist eine Implementierung, die in allen gängigen Browsern funktioniert:

var savedRange; // Variable to store the saved selection
var isInFocus; // Flag to track focus state

function saveSelection() {
  if (window.getSelection) {
    // Browser-specific logic to save the selected range
    savedRange = window.getSelection().getRangeAt(0);
  }
}

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

  if (savedRange != null) {
    // Browser-specific logic to restore the saved range
    if (window.getSelection) {
      var s = window.getSelection();
      s.removeAllRanges();
      s.addRange(savedRange);
    }
  }
}

// Optional code for selection restoration on click
function cancelEvent(e) {
  if (isInFocus == false && savedRange != null) {
    e.stopPropagation();
    e.preventDefault();
    restoreSelection();
  }
}

// Event handlers for saving and restoring selection
$(document).ready(function() {
  $("#area").focus(function() {
    isInFocus = true;
  });

  $("#area").blur(function() {
    isInFocus = false;
    saveSelection();
  });

  $("#area").mouseup(function() {
    saveSelection();
  });

  $("#area").keyup(function() {
    saveSelection();
  });

  $("#area").focusin(function() {
    restoreSelection();
  });

  // Optional event handlers for restoring selection on click
  $("#area").mousedown(function(e) {
    return cancelEvent(e);
  });

  $("#area").click(function(e) {
    return cancelEvent(e);
  });
});
Nach dem Login kopieren

Diese Lösung deckt sowohl die Wiederherstellung der Cursorposition beim erneuten Fokussieren als auch das optionale Verhalten der Wiederherstellung der Auswahl beim Klicken ab. Es ist mit allen gängigen Browsern kompatibel und bietet eine definitive Lösung für das Problem des Verlusts der Cursorposition in einem bearbeitbaren Inhalt

.

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

Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage