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

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>.