javascript - 如果用户已在页面上输入内容但未保存，则显示消息

如果用户输入了一些内容但又没有保存并尝试离开页面，该如何显示类似弹出模式的消息？

就像是：



如果您尝试输入URL，然后尝试转到Facebook BUT中的另一个页面，则会显示本机警报框，例如：



1.）有什么区别？警报是否内置在浏览器中？

2.）当发生类似事件时，如何使用jQuery创建自己的自定义模式框？

谢谢

最佳答案

由于您为此使用jQuery，因此我会将默认值附加到每个元素数据持有者，然后使用上面的onbeforeunload代码对照存储的原始值检查所有当前值...示例：

$(document).ready(function() {
    $('#formID input').each(function() {

        $(this).data('original', $(this).val());

    });
});

window.addEventListener('beforeunload', beforeUnload, true);
$(".submit").click(function(){
    window.removeEventListener('beforeunload', beforeUnload, true);

});

然后：

function beforeUnload(e) {
    $('#formID input').each(function() {

        if($(this).data('original') != $(this).val()) {
            return "You have unsaved changes!";
        }

    });
}

该代码适用于INPUT标签，您必须对其进行修改以对textarea进行类似检查，并根据需要选择元素。