How to Implement a 'Leave Page?' Confirmation for Unsaved Changes?

How to Implement the "Are you sure you want to navigate away from this page?" Confirmation When Unsaved Changes Exist

When browsing web pages, users may encounter a confirmation prompt that appears prior to navigating away from a page where unsaved changes have been made. This confirmation serves to alert users that their unsaved changes will be lost if they proceed. This article explores how to implement this functionality, addressing the specific challenges faced in browsers with different capabilities.

One method involves leveraging the window.onbeforeunload event. Historically, this event could be assigned a string value to display a custom confirmation message, but modern browsers consider this a security hazard and now only display generic messages. As a result, the implementation has been simplified to the following:

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

// Remove navigation prompt
window.onbeforeunload = null;

For legacy browser support, a more comprehensive approach is required. The window.onbeforeunload event must be assigned a function reference, and in older browsers, the returnValue property of the event must be set:

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.';
};

To toggle the confirmation prompt, simply assign the confirmOnPageExit function to window.onbeforeunload to enable it and remove the function to disable it:

// Turn it on
window.onbeforeunload = confirmOnPageExit;

// Turn it off
window.onbeforeunload = null;

To track unsaved changes, it's necessary to rely on the specific validation framework being used. For example, in jQuery, the following code snippet demonstrates how to monitor changes to input fields and trigger the confirmation prompt:

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

The above is the detailed content of How to Implement a 'Leave Page?' Confirmation for Unsaved Changes?. For more information, please follow other related articles on the PHP Chinese website!