Comment implémenter une « page de congé ? » Confirmation des modifications non enregistrées ?

Comment implémenter le message « Êtes-vous sûr de vouloir quitter cette page ? » Confirmation lorsque des modifications non enregistrées existent

Lors de la navigation sur des pages Web, les utilisateurs peuvent rencontrer une invite de confirmation qui apparaît avant de quitter une page sur laquelle des modifications non enregistrées ont été apportées. Cette confirmation sert à alerter les utilisateurs que leurs modifications non enregistrées seront perdues s'ils continuent. Cet article explore comment implémenter cette fonctionnalité, en abordant les défis spécifiques rencontrés dans les navigateurs dotés de différentes capacités.

Une méthode consiste à exploiter l'événement window.onbeforeunload. Historiquement, cet événement pouvait se voir attribuer une valeur de chaîne pour afficher un message de confirmation personnalisé, mais les navigateurs modernes considèrent cela comme un risque pour la sécurité et n'affichent désormais que des messages génériques. En conséquence, la mise en œuvre a été simplifiée comme suit :

// Enable navigation prompt
window.onbeforeunload = function() {
    return true;
};

// Remove navigation prompt
window.onbeforeunload = null;

Pour la prise en charge des navigateurs existants, une approche plus complète est requise. L'événement window.onbeforeunload doit se voir attribuer une référence de fonction, et dans les anciens navigateurs, la propriété returnValue de l'événement doit être définie :

var confirmOnPageExit = function (e) {
    // Get the event object
    e = e || window.event;

    // Set the return value to display the message
    if (e) {
        e.returnValue = 'Confirm exit? Unsaved changes will be lost.';
    }

    // Return the message for newer browsers
    return 'Confirm exit? Unsaved changes will be lost.';
};

Pour activer/désactiver l'invite de confirmation, attribuez simplement la fonction confirmOnPageExit à window. onbeforeunload pour l'activer et supprimer la fonction pour le désactiver :

// Turn it on
window.onbeforeunload = confirmOnPageExit;

// Turn it off
window.onbeforeunload = null;

Pour suivre les modifications non enregistrées, il faut s'appuyer sur le cadre de validation spécifique utilisé. Par exemple, dans jQuery, l'extrait de code suivant montre comment surveiller les modifications apportées aux champs de saisie et déclencher l'invite de confirmation :

$('input').change(function() {
    if( $(this).val() != "" ) {
        window.onbeforeunload = confirmOnPageExit;
    }
});

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!