在离开网页之前提醒用户表单上未保存的更改

Question

我的应用程序中有表单，全部在一个页面中，我在按钮单击时更改它们而不刷新页面。

如何以这样一种方式保护表单，即如果有人离开、更改表单或关闭浏览器选项卡，应提示他们确认他们确实想要留下未保存数据的表单？

是的，我知道 onbeforeunload 事件，但如果我在不刷新页面的情况下更改表单，它将不起作用

希望有人理解我，并可以提供建议

PS我和苗条一起工作

Answer 1

是否有导航无关紧要，您只需要对更改做出反应，例如，您可以在form级别处理change事件以添加添加确认问题的beforeunload处理程序。

就像是：

<script>
  function onChange() {
    window.addEventListener('beforeunload', e => {
      e.preventDefault()
      return e.returnValue = "Are you sure you want to exit?";
    });
  }
</script>

<form on:change={onChange}>
  ...
</form>

（也许添加一个标志 & if以防止添加重复的侦听器。）

change事件仅捕获与本机输入元素的常见交互。 如果事件停止到达表单（或您添加侦听器的任何容器），这将不起作用。 它也不会捕获更复杂的逻辑，例如将项目添加到某个列表。

根据您的具体代码，您可能需要处理其他/不同的事件或更改。

如果您使用某种客户端路由器，您还必须向它发出信号，它不应该离开，因为不会触发beforeunload 。 如何做到这一点完全取决于所使用的路由器。