如何防止导航到其他页面而不用 Javascript 提交表单？

Question

如果用户填写了一半的表单，并且如果用户在没有提交该表单的情况下导航另一个 URL，他应该得到确认，如果他确认了，那么他应该导航。如何在 Javascript 中实现这一点？

Answer 1

有两个选项可以解决此问题 - 第三方解决方案和自定义解决方案。 （我推荐第三方解决方案，后面我会解释原因）

第三方 - jQuery 的 jquery.dirty：

优点：

• 语法简单
• 大多数浏览器都支持
• 不太可能引起问题

缺点：

• 外包依赖 - 通常不太安全
• 可定制性较低

jquery.dirty 提供了检测表单是否被更改，并防止用户在显示提示时离开页面的功能。它还具有其他有用的功能，例如重置表单，以及将表单的当前状态设置为“干净”状态。示例用法：

$("#myForm").dirty({preventLeaving: true});

内部解决方案 - 使用 `beforeunload`：

优点：

- 更可定制，您可以定制 i。 - 通常更安全 - 没有依赖关系

缺点：

- 并非所有浏览器都支持（其中大多数不支持自定义按摩） - 你在编码过程中更容易遇到问题

当窗口、文档和它的资源即将被卸载时，beforeunload 事件被触发。此时文档仍然可见，并且事件仍然可以取消。

在实现代码之前，我们需要面对几个问题（可以解决）。

1。提交表单也是一个 `unload` 事件

为了解决这个问题，我们将添加一个标志来告诉我们表单已提交。

var formSubmitting = false;
var setFormSubmitting = function() { formSubmitting = true; };

window.onload = function() {
    window.addEventListener("beforeunload", function (e) {
        if (formSubmitting) {
            return undefined;
        }

        var confirmationMessage = 'It looks like you have been editing something. '
                                + 'If you leave before saving, your changes will be lost.';
        
        (e || window.event).returnValue = confirmationMessage; 
        return confirmationMessage;
    });
};

2。当用户不做任何改变时会发生什么？

为了解决这个问题，我们将使用 `isDirty` 方法添加一个 `dirty` 来触发相关事件的提示。

var isDirty = function() { return false; }

window.onload = function() {
    window.addEventListener("beforeunload", function (e) {
        if (formSubmitting || !isDirty()) {
            return undefined;
        }
        
        var confirmationMessage = 'It looks like you have been editing something. '
                                + 'If you leave before saving, your changes will be lost.';

        (e || window.event).returnValue = confirmationMessage; //Gecko + IE
        return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
    });
};