Comment empêcher la navigation accidentelle hors d'une page avec des modifications non enregistrées ?

Comment afficher « Êtes-vous sûr de vouloir quitter cette page ? » Lorsque des modifications sont validées

Dans un environnement Web moderne, l'affichage d'invites de navigation personnalisées est considéré comme un problème de sécurité et les navigateurs ne prennent plus en charge cette fonctionnalité. Au lieu de cela, les navigateurs n'afficheront que des messages génériques. Pour activer ou désactiver l'invite de navigation, utilisez simplement le code suivant :

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

// Remove navigation prompt
window.onbeforeunload = null;

Legacy Browser Support (Obsolète)

Pour la compatibilité avec les navigateurs plus anciens tels que comme IE6-8 et Firefox 1-3.5, vous pouvez utiliser le code suivant pour afficher une navigation personnalisée invite :

var confirmOnPageExit = function (e) {
    // Define the message to be displayed
    var message = 'Confirm your navigation away from the page';

    // Handle compatibility with older browsers
    if (e) {
        e.returnValue = message;
    }

    // Return the message
    return message;
};

// Enable the navigation prompt
window.onbeforeunload = confirmOnPageExit;

// Disable the navigation prompt
window.onbeforeunload = null;

Pour vérifier les valeurs modifiées lors de l'utilisation d'un framework de validation tel que jQuery, vous pouvez utiliser un code similaire à celui-ci :

$('input').change(function() {
    // Check if the input value is not empty
    if( $(this).val() != "" ) {
        // Enable the navigation prompt
        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!