Maison >interface Web >js tutoriel >Comment puis-je empêcher les utilisateurs de quitter une page Web avec des modifications non enregistrées ?

Comment puis-je empêcher les utilisateurs de quitter une page Web avec des modifications non enregistrées ?

Linda Hamilton
Linda Hamiltonoriginal
2024-11-30 01:17:11867parcourir

How Can I Prevent Users from Leaving a Web Page with Unsaved Changes?

Empêcher les modifications non enregistrées

Lors de la modification de données sur une page Web, il est courant de vouloir empêcher les utilisateurs de naviguer sans enregistrer leur changements. Ceci peut être réalisé en utilisant l'événement window.onbeforeunload.

Implementation

Navigateurs hérités (IE6-8, Firefox 1-3.5)

  1. Ensemble window.onbeforeunload à une fonction renvoyant une chaîne :

    window.onbeforeunload = function() {
        return "Unsaved changes. Are you sure you want to leave?";
    };
  2. Supprimez l'événement pour le désactiver :

    window.onbeforeunload = null;

Navigateurs modernes (Chrome, Firefox, etc.)

  1. Activer l'invite :

    window.onbeforeunload = function() {
        return true;
    };
  2. Désactiver l'invite :

    window.onbeforeunload = null;

Suivi Modifications

Pour déterminer si des modifications ont été apportées, utilisez un cadre de validation ou vos propres gestionnaires d'événements personnalisés.

Exemple jQuery :

$('input').change(function() {
    if ($(this).val() != "") {
        // Enable the prompt
        window.onbeforeunload = function() {
            return true;
        };
    }
});

Spécifique au navigateur Considérations

  • Chrome et Safari affichent uniquement les messages génériques et empêchent les messages personnalisés.
  • Firefox vous invite uniquement lors de la soumission du formulaire, pas lors des modifications d'URL.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn