javascript - 如何使用JS做到页面关闭或跳转时的确认提示？

问题描述

问 题

假设我有个如下编写的内容写作组件：

<form>
  <label>编写文本处</label>
  <textarea></textarea>
  <input type="submit" value="提交" />
</form>

现在我想做到：

1. 当我关闭本窗口时会弹出提示可能还有未保存的内容，是否确认离开；

2. 当我刷新本页面时会弹出提示可能还有未保存的内容，是否确认离开；

3. 当我点击页面内其他链接时会弹出提示可能还有未保存的内容，是否确认离开；

4. 当我在地址栏输入链接跳转时会弹出提示可能还有未保存的内容，是否确认离开；

5. 当我点击提交按钮时提交成功，不需要弹出任何提示。

解决方案

我试了一下，onbeforeunload在Chrome上是有效果的。实现1,2,3,4,5的完整效果要如下考虑：

  <form>
    <p>
      <label>标题</label>
      <input type="text" name="title" />
    </p>
    <textarea name="content"></textarea>
    <p>
      <input type="submit" value="提交" />
    </p>
  </form>
  <script>
    var formSubmitted = false;
    
    $("form").on("submit", function (e) {
        // 标记一个表单提交
        formSubmitted = true;
    });
    window.onbeforeunload = function () {
        // 只有在不是一个表单提交的时候，才会阻止跳转
        if (!formSubmitted) {
            return "您似乎有些数据没有保存";
        }
    };
  </script>

这篇关于javascript - 如何使用JS做到页面关闭或跳转时的确认提示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！