如果用户在页面上输入了内容但未保存，则显示消息

Question

如果用户输入了某些内容但未保存并尝试离开该页面，如何显示弹出模式之类的消息？

类似的东西：

如果您尝试转到Facebook内的其他页面但是如果您输入网址，则会出现这种情况，然后您会收到如下原生警告框：

1。）有什么区别？警报是否内置于浏览器中？

2.。）当类似事件发生时，如何使用jQuery创建自己的自定义模式框？

由于

Answer 1

试试这个

window.onbeforeunload = function(evt){

    //Show you custom confirm dialog box here
    //Inside the confirm dialog box if the use say YES leave the page
    //Then you should set `window.onbeforeunload` to null and
    //redirect to required location so that it will not ask again.
    var dialog = $('#confirmDialog').dialog('open');

    //This will prevent the default dialog box of the browser.
    return false;
}

请参阅MSDN article on onbeforeunload

Answer 2

由于您正在使用jQuery，我会将默认值附加到每个元素数据持有者，然后使用上面的onbeforeunload代码检查所有当前值与存储的原始值...示例：

$(document).ready(function() {
    $('#formID input').each(function() {

        $(this).data('original', $(this).val());

    });
});

window.addEventListener('beforeunload', beforeUnload, true);
$(".submit").click(function(){
    window.removeEventListener('beforeunload', beforeUnload, true);

});

THEN：

function beforeUnload(e) {
    $('#formID input').each(function() {

        if($(this).data('original') != $(this).val()) {
            return "You have unsaved changes!";
        }

    });
}

此代码适用于INPUT标记，您必须修改它以对textarea执行类似检查并根据需要选择元素。