javascript - 用于 "Unsaved Data"保护的客户端/JS 框架？

Question

我们有一个典型的 Web 应用程序，它本质上是一个数据输入应用程序，有很多屏幕，其中一些屏幕具有一定程度的复杂性。我们需要提供标准功能，以确保如果用户在离开或关闭浏览器之前忘记单击“保存”按钮，他们会收到警告并可以取消(但仅当存在未保存或脏数据时)。

我知道我必须做的事情的基础知识——事实上，我确信这些年来我已经完成了这一切(绑定(bind)到 onbeforeunload、跟踪页面的“脏”状态等) ...)但是在我再次开始编码之前，是否有人对已经存在的库(免费或其他)有一些建议可以提供帮助？

Answer 1

一 block 拼图:

/**
 * 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;
}

And another :

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 的事件注册。