Question

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

这是功能要求：

“用户打开页面而不是点击任何链接，如果页面中的值更改了警告消息弹出窗口以通知用户他需要保存更改的数据，但如果没有更改任何事情系统继续没有通知用户”。

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

Answer 1

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

这是一个借助JavaScript库jQuery的具体示例（否则您最终将获得10倍的代码以使其与crossbrowser兼容，并与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>模板中，或者只将其放入script.js所包含的<h:outputScript>文件中。

Answer 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;
        }

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

2 个答案: