Question

当寻找一种方法来警告用户（如果尚未保存更改）在离开网页之前发出警告时，我发现了以下解决方案：https://stackoverflow.com/a/48238659/9512437，但是即使用户按下保存按钮，也会弹出警告。我尝试在用户单击“提交”按钮时设置一个事件，以设置一个变量以防止出现警告，但是现在警告永远不会出现。

这是我尝试过的：

UPDATE

知道我做错了什么吗？

Answer 1

原来我做错了几件事。我的猜测是在document.getElementById("submit").onclick下添加"use strict"可能导致错误（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>

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

1 个答案: