查看JavaScript onbeforeunload事件。它是微软引入的非标准JavaScript，但是它可以在大多数浏览器中运行，他们的onbeforeunload文档有更多的信息和示例。

根据之前的回答，并从堆栈溢出的不同地方拼凑在一起，这里是我提出的解决方案，当你实际上想要提交你的更改时，它可以处理这种情况:

window.thisPage = window.thisPage || {};
window.thisPage.isDirty = false;

window.thisPage.closeEditorWarning = function (event) {
    if (window.thisPage.isDirty)
        return 'It looks like you have been editing something' +
               ' - if you leave before saving, then your changes will be lost.'
    else
        return undefined;
};

$("form").on('keyup', 'textarea', // You can use input[type=text] here as well.
             function () { 
                 window.thisPage.isDirty = true; 
             });

$("form").submit(function () {
    QC.thisPage.isDirty = false;
});
window.onbeforeunload = window.thisPage.closeEditorWarning;

值得注意的是，IE11似乎要求closeEditorWarning函数返回undefined才能不显示警报。

查看JavaScript onbeforeunload事件。它是微软引入的非标准JavaScript，但是它可以在大多数浏览器中运行，他们的onbeforeunload文档有更多的信息和示例。

我做了不同的，分享在这里，以便有人可以得到帮助，只测试Chrome。

我想警告用户关闭标签只有当有一些变化。

<input type="text" name="field" value="" class="onchange" />

var ischanged = false;

$('.onchange').change(function () {
    ischanged = true;
});

window.onbeforeunload = function (e) {
    if (ischanged) {
        return "Make sure to save all changes.";
    }        
};

工作很好，但有一个其他的问题，当我提交的形式，我得到不想要的警告，我看到了很多解决方法，这是因为onbeforeunload火灾之前onsubmit，这就是为什么我们不能处理它在onsubmit事件像onbeforeunload = null，但onclick事件提交按钮火灾前这两个事件，所以我更新了代码

var isChanged = false;
var isSubmit = false;

window.onbeforeunload = function (e) {
    if (isChanged && (!isSubmit)) {
        return "Make sure to save all changes.";
    }        
};

$('#submitbutton').click(function () {
    isSubmit = true;
});

$('.onchange').change(function () {
    isChanged = true;
});

Eerik Sven Puudist的解决方案…

var isSubmitting = false;

$(document).ready(function () {
    $('form').submit(function(){
        isSubmitting = true
    })

    $('form').data('initial-state', $('form').serialize());

    $(window).on('beforeunload', function() {
        if (!isSubmitting && $('form').serialize() != $('form').data('initial-state')){
            return 'You have unsaved changes which will not be saved.'
        }
    });
})

…在复杂的面向对象设置中，自发地为我完成了这项工作，而不需要任何更改。

我应用的唯一更改是引用具体的表单(每个文件只有一个表单)，称为“formForm”('form' -> '#formForm'):

<form ... id="formForm" name="formForm" ...>

特别出色的是，提交按钮被“单独保留”了。

此外，它也适用于最新版本的Firefox(截至2019年2月7日)。

您可以使用serialize()通过序列化表单值来创建URL编码的文本字符串，并检查表单在卸载前是否已更改

$(document).ready(function(){
    var form = $('#some-form'),
        original = form.serialize()

    form.submit(function(){
        window.onbeforeunload = null
    })

    window.onbeforeunload = function(){
        if (form.serialize() != original)
            return 'Are you sure you want to leave?'
    }
})

参考这个链接https://coderwall.com/p/gny70a/alert-when-leaving-page-with-unsaved-form 作者:弗拉基米尔·西多伦科