如何防止用户在离开页面时丢失未保存的表单数据？-js教程-PHP中文网

如何防止用户在离开页面时丢失未保存的表单数据？

Linda Hamilton

发布： 2024-11-25 03:57:13

原创

954 人浏览过

How Can I Prevent Users from Losing Unsaved Form Data When Leaving a Page?

防止页面放弃时未保存的更改

当用户离开包含未保存表单数据的页面时，提示他们确认他们的信息至关重要避免失去工作的意图。要实现此功能：

简短但有限的方法：

window.addEventListener("beforeunload", function (e) {
  e.returnValue = "Warning: Unsaved changes. Are you sure you want to leave?";
});

登录后复制

但是，即使提交表单数据，此方法也会触发确认消息，需要解决方法。

脏乱差综合解决方案标志：

为了防止确认消息出现在不相关的页叶上，请使用“脏”标志来指示表单数据何时更改。

const isDirty = () => false;

window.addEventListener("beforeunload", function (e) {
  if (formSubmitting || !isDirty()) {
    return;
  }

  e.returnValue = "Warning: Unsaved changes. Are you sure you want to leave?";
});

登录后复制

实现 isDirty方法使用：

基于事件的方法： 监控用户交互来检测更改，但要考虑一些限制，例如在剪切和粘贴时不触发。
jQuery Dirty 插件： 一个方便的库，用于检测表单更改并防止使用自定义消息退出页面。

警告：有限的浏览器支持

请注意自定义确认某些浏览器（例如 Chrome 51 及更高版本）不再支持消息。替代方案包括显示带有“离开”和“留下”按钮的通用对话框。

以上是如何防止用户在离开页面时丢失未保存的表单数据？的详细内容。更多信息请关注PHP中文网其他相关文章！