一块拼图：

/**
 * Determines if a form is dirty by comparing the current value of each element
 * with its default value.
 *
 * @param {Form} form the form to be checked.
 * @return {Boolean} <code>true</code> if the form is dirty, <code>false</code>
 *                   otherwise.
 */
function formIsDirty(form)
{
    for (var i = 0; i < form.elements.length; i++)
    {
        var element = form.elements[i];
        var type = element.type;
        if (type == "checkbox" || type == "radio")
        {
            if (element.checked != element.defaultChecked)
            {
                return true;
            }
        }
        else if (type == "hidden" || type == "password" || type == "text" ||
                 type == "textarea")
        {
            if (element.value != element.defaultValue)
            {
                return true;
            }
        }
        else if (type == "select-one" || type == "select-multiple")
        {
            for (var j = 0; j < element.options.length; j++)
            {
                if (element.options[j].selected !=
                    element.options[j].defaultSelected)
                {
                    return true;
                }
            }
        }
    }
    return false;
}

另一个：

window.onbeforeunload = function(e)
{
    e = e || window.event;  
    if (formIsDirty(document.forms["someFormOfInterest"]))
    {
        // For IE and Firefox
        if (e)
        {
            e.returnValue = "You have unsaved changes.";
        }
        // For Safari
        return "You have unsaved changes.";
    }
};

把它全部包起来，你会得到什么？

var confirmExitIfModified = (function()
{
    function formIsDirty(form)
    {
        // ...as above
    }

    return function(form, message)
    {
        window.onbeforeunload = function(e)
        {
            e = e || window.event;
            if (formIsDirty(document.forms[form]))
            {
                // For IE and Firefox
                if (e)
                {
                    e.returnValue = message;
                }
                // For Safari
                return message;
            }
        };
    };
})();

confirmExitIfModified("someForm", "You have unsaved changes.");

您可能还想更改beforeunload事件处理程序的注册以使用LIBRARY_OF_CHOICE的事件注册。

如果您使用 jQuery，这里有一个简单的技巧：

$('input:text,input:checkbox,input:radio,textarea,select').one('change',function() {
  $('BODY').attr('onbeforeunload',"return 'Leaving this page will cause any unsaved data to be lost.';");
});

但请记住，如果您有从该页面重定向的条件，或者您想允许成功发布表单，则需要在重定向或提交事件之前执行此操作，如下所示：

$('BODY').removeAttr('onbeforeunload');

...或者你会陷入一个循环，它不断地向你询问提示。

就我而言，我有一个很大的应用程序，我在 Javascript 中进行 location.href 重定向，以及表单发布，然后一些 AJAX 提交，然后在页面中内嵌成功响应。在任何这些情况下，我都必须捕获该事件并使用 removeAttr() 调用。

想要稍微扩展 Volomike 优秀的 jQuery 代码。

因此，有了这个，我们有一个非常酷和优雅的机制，通过在保存之前导航离开更新的数据来实现防止无意数据丢失的目标 - 即。页面上的更新字段，然后在单击“保存”按钮之前单击浏览器中的按钮、链接甚至后退按钮。

您唯一需要做的就是向所有控件（尤其是保存按钮）添加一个“noWarn”类标签，这些控件将回发到网站，保存或不删除任何更新的数据。

如果控件导致页面丢失数据，即。导航到下一页或清除数据 - 您无需执行任何操作，因为脚本会自动显示警告消息。

惊人的！沃洛迈克干得好！

只需将 jQuery 代码如下：

$(document).ready(function() {

    //----------------------------------------------------------------------
    // Don't allow us to navigate away from a page on which we're changed
    //  values on any control without a warning message.  Need to class our 
    //  save buttons, links, etc so they can do a save without the message - 
    //  ie. CssClass="noWarn"
    //----------------------------------------------------------------------
    $('input:text,input:checkbox,input:radio,textarea,select').one('change', function() {
        $('BODY').attr('onbeforeunload',
        "return 'Leaving this page will cause any unsaved data to be lost.';");
    });

    $('.noWarn').click(function() { $('BODY').removeAttr('onbeforeunload'); });

});

除了 Lance 的回答之外，我还花了一个下午的时间试图让这个片段运行起来。首先，jquery 1.4 似乎有绑定更改事件的错误（截至 2010 年 2 月）。jQuery 1.3 没问题。其次，我无法让 jquery 绑定 onbeforeunload/beforeunload（我怀疑我正在使用的 IE7）。我尝试了不同的选择器，（“body”），（window）。我试过“.bind”、“.attr”。恢复到纯 js 有效（我也在 SO 上看到了一些关于这个问题的类似帖子）：

$(document).ready(function() {
    $(":input").one("change", function() {
        window.onbeforeunload = function() { return 'You will lose data changes.'; }
    });
    $('.noWarn').click(function() { window.onbeforeunload = null; });
});

注意我还使用了 ':input' 选择器，而不是枚举所有输入类型。绝对矫枉过正，但我​​认为这很酷:-)

我创建了一个 jQuery插件，可用于为 Web 应用程序实现未保存更改警告功能。它支持回发。它还包括有关如何规范onbeforeunloadInternet Explorer 事件行为的信息的链接。