如何实现'离开页面”？确认未保存的更改？

如何实现“您确定要离开此页面吗？”存在未保存更改时的确认

浏览网页时，用户可能会在离开未保存更改的页面之前遇到确认提示。此确认旨在提醒用户，如果继续操作，未保存的更改将会丢失。本文探讨了如何实现此功能，解决具有不同功能的浏览器所面临的特定挑战。

一种方法涉及利用 window.onbeforeunload 事件。从历史上看，可以为该事件分配一个字符串值来显示自定义确认消息，但现代浏览器认为这是一个安全隐患，现在只显示通用消息。因此，实现已简化为以下内容：

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

// Remove navigation prompt
window.onbeforeunload = null;

对于旧版浏览器支持，需要更全面的方法。必须为 window.onbeforeunload 事件分配一个函数引用，并且在较旧的浏览器中，必须设置该事件的 returnValue 属性：

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

要切换确认提示，只需将confirmOnPageExit 函数分配给 window.onbeforeunload 即可。 onbeforeunload 来启用它，删除该功能来禁用它：

// Turn it on
window.onbeforeunload = confirmOnPageExit;

// Turn it off
window.onbeforeunload = null;

要跟踪未保存的更改，需要依赖正在使用的特定验证框架。例如，在 jQuery 中，以下代码片段演示了如何监控输入字段的更改并触发确认提示：

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

以上是如何实现'离开页面”？确认未保存的更改？的详细内容。更多信息请关注PHP中文网其他相关文章！