如何在离开页面之前提示用户确认未保存的更改？

确认未保存的更改

问题：当用户离开时如何显示确认消息未保存的页面更改？

跟踪更改：

要跟踪更改，您可以使用事件侦听器来侦听输入字段或其他存储数据的元素中的更改。当发生更改时，设置一个标志以指示有未保存的更改。

显示确认：

要显示确认消息，可以使用 window.onbeforeunload事件。当用户尝试离开页面时触发。在此事件处理程序中，检查是否有任何未保存的更改。如果有，使用confirm()显示确认消息。

示例：

// Create a flag to track changes
var hasUnsavedChanges = false;

// Add an event listener to input fields
$('input').on('change', function() {
  hasUnsavedChanges = true;
});

// Create an event handler for window.onbeforeunload
window.onbeforeunload = function() {
  if (hasUnsavedChanges) {
    return "Are you sure you want to leave this page? You have unsaved changes.";
  }
};

以上是如何在离开页面之前提示用户确认未保存的更改？的详细内容。更多信息请关注PHP中文网其他相关文章！