Comment puis-je empêcher les utilisateurs de perdre les données de formulaire non enregistrées lorsqu'ils quittent une page ?

Prévenir les modifications non enregistrées lors de l'abandon de page

Lorsque les utilisateurs quittent une page contenant des données de formulaire non enregistrées, il est crucial de les inviter à confirmer leur intentions d’éviter de perdre leur travail. Pour mettre en œuvre ceci :

Approche courte mais limitée :

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

Cette approche déclenche cependant le message de confirmation même lorsque les données du formulaire sont soumises, ce qui nécessite une solution de contournement.

Solution complète avec Dirty Flag :

Pour empêcher le message de confirmation de apparaissant sur les feuilles de page non pertinentes, utilisez un indicateur « sale » qui indique quand les données du formulaire ont été modifiées.

const isDirty = () => false;

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

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

Implémentez la méthode isDirty en utilisant :

• Event- Approche basée : Surveillez les interactions des utilisateurs pour détecter les changements, mais tenez compte des limitations telles que ne pas déclencher lors de la coupe et collage.
• jQuery Dirty Plugin : Une bibliothèque pratique pour détecter les modifications de formulaire et empêcher les sorties de page avec un message personnalisé.

Avertissement : navigateur limité Assistance

Notez que les messages de confirmation personnalisés ne sont plus pris en charge dans certains navigateurs, tels que Chrome 51 et versions ultérieures. Les alternatives incluent l'affichage d'une boîte de dialogue générique avec les boutons « Quitter » et « Rester ».

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!