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

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) {为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>