如果更改尚未保存，请在离开网页前警告用户

Question

在搜索未保存更改时在离开网页前警告用户的方法时，我找到了这个解决方案：https://stackoverflow.com/a/48238659/9512437，但即使用户点击保存按钮也会弹出警告。我尝试在用户单击提交按钮时添加一个事件以设置一个变量以防止出现警告，但现在警告永远不会出现。

这是我尝试过的：

<script>
    "use strict";
    var btn_click = false;

    (() => {
    const modified_inputs = new Set;
    const defaultValue = "defaultValue";
    // store default values
    addEventListener("beforeinput", (evt) => {
        const target = evt.target;
        if (!(defaultValue in target || defaultValue in target.dataset)) {
            target.dataset[defaultValue] = ("" + (target.value || target.textContent)).trim();
        }
    });
    // detect input modifications
    addEventListener("input", (evt) => {
        const target = evt.target;
        let original;
        if (defaultValue in target) {
            original = target[defaultValue];
        } else {
            original = target.dataset[defaultValue];
        }
        if (original !== ("" + (target.value || target.textContent)).trim()) {
            if (!modified_inputs.has(target)) {
                modified_inputs.add(target);
            }
        } else if (modified_inputs.has(target)) {
            modified_inputs.delete(target);
        }
    });
    addEventListener("beforeunload", (evt) => {
        if (modified_inputs.size && !btn_click) {
            const unsaved_changes_warning = "Changes you made may not be saved.";
            evt.returnValue = unsaved_changes_warning;
            return unsaved_changes_warning;
        }
    });
    addEventListener("")
    })();

    document.getElementById("submit").onclick = function save() {
        btn_click = true;
    }
</script>

知道我做错了什么吗？

Answer 1

原来我做错了几件事。我的猜测是在"use strict" 下添加document.getElementById("submit").onclick 会导致错误（https://www.w3schools.com/js/js_strict.asp）或导致检测出现问题，因为即使没有&& !btn_click 也只是简单地添加函数会导致它无法工作。我还必须将if (modified_inputs.size && !btn_click) { 更改为if (modified_inputs.size >> 0 && !btn_click) {。

最后，最终为我工作的解决方案如下：

<script>
    var btn_click = false;

    function save() {
        btn_click = true;
    }

    "use strict";
    (() => {
    const modified_inputs = new Set;
    const defaultValue = "defaultValue";
    // store default values
    addEventListener("beforeinput", (evt) => {
        const target = evt.target;
        if (!(defaultValue in target || defaultValue in target.dataset)) {
            target.dataset[defaultValue] = ("" + (target.value || target.textContent)).trim();
        }
    });
    // detect input modifications
    addEventListener("input", (evt) => {
        const target = evt.target;
        let original;
        if (defaultValue in target) {
            original = target[defaultValue];
        } else {
            original = target.dataset[defaultValue];
        }
        if (original !== ("" + (target.value || target.textContent)).trim()) {
            if (!modified_inputs.has(target)) {
                modified_inputs.add(target);
            }
        } else if (modified_inputs.has(target)) {
            modified_inputs.delete(target);
        }
    });
    addEventListener("beforeunload", (evt) => {
        if (modified_inputs.size >> 0 && !btn_click) {
            const unsaved_changes_warning = "Changes you made may not be saved.";
            evt.returnValue = unsaved_changes_warning;
            return unsaved_changes_warning;
        }
    });
    addEventListener("")
    })();
</script>

然后将您的 onclick 添加到元素：

<button type="submit" class="w3-button w3-right w3-theme" id="button" onclick="save()">Save</button>