Comment les applications Web peuvent-elles empêcher de manière fiable la perte de données de formulaire non enregistrées ?

Prévenir les sorties de formulaires non enregistrées

De nombreuses applications Web proposent des formulaires qui permettent aux utilisateurs de saisir et de modifier des données. Empêcher la perte involontaire de données lorsque les utilisateurs quittent ces formulaires ou ferment l'onglet du navigateur est une mesure de sécurité cruciale. Cet article explore une solution complète à ce problème avec une analyse détaillée de diverses approches.

Solution de courte durée et défectueuse

Tenter de gérer l'événement beforeunload et renvoyer un une chaîne non nulle semble résoudre le problème. Toutefois, cette approche échoue lorsque les utilisateurs soumettent des formulaires, ce qui déclenche également l'événement de déchargement. Pour atténuer ce problème, un indicateur peut être introduit pour indiquer qu'un formulaire est en cours de soumission. Cependant, cette solution reste problématique car elle ne prend pas en compte les modifications réelles apportées au formulaire.

Solution idéale : exploiter un indicateur « sale »

Une approche plus complète Cette approche implique l'utilisation d'un indicateur « sale » qui déclenche l'alerte uniquement lorsque des changements de formulaire importants se produisent. Cette méthode combine l'événement beforeunload avec la fonction isDirty, qui détecte si des valeurs de formulaire pertinentes ont été modifiées.

Détermination du statut « Dirty »

La mise en œuvre de la fonction isDirty implique plusieurs considérations :

• jQuery : l'utilisation de la sérialisation des formulaires de jQuery peut avoir des limites, car cela ne fonctionne que sur les éléments nommés et non désactivés.
• Événements : les événements de pression de touche sont limités et peuvent ne pas capturer toutes les modifications.
• Les événements de modification ont également des limites dans la détection des modifications induites par JavaScript.

Éviter la gestion des événements Pièges

• Événements de pression de touche : Ne couvrez pas les cases à cocher, les boutons radio, les modifications déclenchées par la souris, les frappes au clavier non pertinentes ou les valeurs modifiées par JavaScript.
• Modifier les événements : Manquez également la modification JavaScript valeurs.
• Événements d'entrée : Manque de compatibilité avec le navigateur et ne capture pas tous les types de modifications.

Bibliothèques tierces pour plus de simplicité

Au lieu de réinventer la roue, envisagez d'utiliser des outils établis bibliothèques :

• jquery.dirty : Détecte les modifications du formulaire et fournit une option de configuration simple.
• Are You Sure?plugin de jQuery : Offre une approche plus personnalisable mais peut avoir des limites compatibilité.

Limites du navigateur :

Firefox 4 n'a plus pris en charge les messages personnalisés dans la boîte de dialogue de confirmation de déchargement. Chrome 51 supprime également cette fonctionnalité. Pensez plutôt à utiliser un message plus générique.

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!