Wie kann ich verhindern, dass Benutzer beim Verlassen einer Seite nicht gespeicherte Formulardaten verlieren?

Verhindern nicht gespeicherter Änderungen beim Seitenabbruch

Wenn Benutzer eine Seite mit nicht gespeicherten Formulardaten verlassen, ist es wichtig, sie zur Bestätigung aufzufordern Absichten, den Verlust ihrer Arbeit zu vermeiden. So implementieren Sie dies:

Kurzer, aber begrenzter Ansatz:

window.addEventListener("beforeunload", function (e) {
  e.returnValue = "Warning: Unsaved changes. Are you sure you want to leave?";
});

Dieser Ansatz löst jedoch die Bestätigungsnachricht auch dann aus, wenn Formulardaten übermittelt werden, was eine Problemumgehung erfordert.

Umfassende Lösung mit Dirty Flag:

Um die Bestätigungsmeldung zu verhindern Um das Erscheinen auf irrelevanten Seitenblättern zu verhindern, verwenden Sie ein „Dirty“-Flag, das anzeigt, wann Formulardaten geändert wurden.

const isDirty = () => false;

window.addEventListener("beforeunload", function (e) {
  if (formSubmitting || !isDirty()) {
    return;
  }

  e.returnValue = "Warning: Unsaved changes. Are you sure you want to leave?";
});

Implementieren Sie die isDirty-Methode mit:

• Ereignis -basierter Ansatz: Überwachen Sie Benutzerinteraktionen, um Änderungen zu erkennen, berücksichtigen Sie jedoch Einschränkungen wie das Nichtauslösen beim Schneiden und Einfügen.
• jQuery Dirty Plugin: Eine praktische Bibliothek zum Erkennen von Formularänderungen und zum Verhindern von Seitenaustritten mit einer benutzerdefinierten Nachricht.

Warnung: Eingeschränkter Browser Unterstützung

Beachten Sie, dass benutzerdefinierte Bestätigungsnachrichten in einigen Browsern, z. B. Chrome 51 und höher, nicht mehr unterstützt werden. Zu den Alternativen gehört die Anzeige eines generischen Dialogs mit den Schaltflächen „Verlassen“ und „Bleiben“.

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass Benutzer beim Verlassen einer Seite nicht gespeicherte Formulardaten verlieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!