Question

我的ts脚本带有处理"unsaved"文本输入的代码

这是脚本代码

export class Unsave {
    public static unsave_check(): void {
        let unsaved = false;
        $(":input").change(function(){ 
            unsaved = true;
            console.log(unsaved);
        });

    function unloadPage(){ 
        if(unsaved){
            return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
        }
    }

    }
}

然后我在其他脚本中使用它

`window.onbeforeunload = Unsave.unsave_check();`

但是，据我所知，function unloadPage()从未被击中，为什么呢？我看到未保存的值正在更改为true。但是当我返回时，我没有收到任何警告消息。

如何解决此问题？

谢谢帮助

Answer 1

我认为您应该在表单初始化后调用Unsave.unsave_check()并将unloadPage绑定到window.onbeforeunload上（您也可以将其设置为静态-或将其他方法设置为非-静态并实例化对象）。您还应该将值unsaved从函数范围移到私有类字段，以便两个方法都可以访问它

export class Unsave {
    private unsaved: boolean = false;

    public register() {
        $(":input").change(() => {
            this.unsaved = true;
            console.log(this.unsaved);
        });
    }

    public unloadPage() {
        if (this.unsaved) {
            return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";
        }
    }
}

// call this after form init
const unsaveChecker = new Unsave();
unsaveChecker.register()
window.onbeforeunload = () => unsaveChecker.unloadPage()

Answer 2

您应该使用以下命令在unloadPage中呼叫window.onbeforeunload：

export class Unsave {
    private static unsaved: boolean = false;
    public static unsave_check(): void {
        Unsave.unsaved = false;
        $(":input").change(function(){ 
            Unsave.unsaved = true;
            console.log(Unsave.unsaved);
        });
    }
    public static unloadPage(): string { 
        if(Unsave.unsaved){
            return "You have unsaved changes on this page. Do you want to     leave this page and discard your changes or stay on this page?";
        }
    }

}

然后 window.onbeforeunload = Unsave.unloadPage(); 在代码的其他地方，您必须调用unsave_check ...
例如：

document.addEventListener("DOMContentLoaded", function() {
    Unsave.unsave_check();
});

注意：unloadPage和unsave_check的命名方式不一致...一个骆驼案，一个蛇案？

离开页面时未保存表单（打字稿）的情况下发出警报

2 个答案: