用户离开页面时如何检测表单中未保存的数据？答案

【问题标题】：How to detect unsaved data in form when user leaves the page?用户离开页面时如何检测表单中未保存的数据？
【发布时间】：2011-11-24 15:02:44
【问题描述】：

当用户离开页面而不提交表单时，我需要检测表单中未保存的数据。我想在不为每个输入添加值更改侦听器的情况下实现它。

这是功能要求：

“如果页面中的值发生更改，则用户打开页面而不是单击任何链接，弹出警报消息通知用户他需要保存更改的数据，但如果没有更改任何内容，系统会继续运行而不通知用户”。

我尝试比较数组方法来比较来自 DB 的 DTO 和绑定 DTO，但它在数组长度和字节比较方面给我带来了很多问题。

【问题讨论】：

@JasperdeVries：我反其道而行之，因为当前一个有 12k 的浏览量，另一个有 3k 的浏览量。这里显然更好的搜索关键字。

标签： jsf

【解决方案1】：

这通常在客户端借助 JavaScript 实现，因为当最终用户离开页面时，不可能很好地从服务器端拦截 beforeunload 事件。

这是一个借助 JavaScript 库 jQuery 的具体示例（否则，您最终会得到 10 倍的代码，以使其正确跨浏览器兼容并与 ajax 重新渲染无缝协作）：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $(function() {
        // Set the unload message whenever any input element get changed.
        $(':input').on('change', function() {
            setConfirmUnload(true);
        });

        // Turn off the unload message whenever a form get submitted properly.
        $('form').on('submit', function() {
            setConfirmUnload(false);
        });
    });

    function setConfirmUnload(on) {
        var message = "You have unsaved data. Are you sure to leave the page?";
        window.onbeforeunload = (on) ? function() { return message; } : null;
    }
</script>

只需将其粘贴到您的 <h:head> 模板中，或者将其放入您通过 <h:outputScript> 包含的某个 script.js 文件中。

【讨论】：

谢谢您的回复，但是Jquery脚本有以下问题----------- $(':input').on('change', function() - --- 不是函数，我在两个调用处理程序中将其更改为如下 ---------------$(':input').change(function()，我想问一下为什么服务器端的方案不好，另外怎么把消息改成自定义消息，非常感谢
您使用的是过时的 jQuery 版本。要么将 jQuery 升级到最新版本，要么使用 .live() 而不是 .on()。如果您使用 JSF ajax 更新字段，.change() 将无法正常工作。服务器端解决方案过于复杂，几乎不可能实施以涵盖所有可能的客户端行为。更改消息很简单，只需编辑var message。

【解决方案2】：

这对我有用。

$(function() {
            // Set the unload message whenever any input element get changed.
            $('input').change(function() {
                setConfirmUnload(true);
            });

            // Turn off the unload message whenever a form get submitted properly.
            $('form').submit(function() {
                setConfirmUnload(false);
            });
        });

        function setConfirmUnload(on) {
            var message = "You have unsaved data. Are you sure to leave the page?";
            window.onbeforeunload = (on) ? function() { return message; } : null;
        }

【讨论】：