通过导航离开页面防止丢失表单数据

时间:2011-07-24 18:04:02

标签: javascript jquery forms

我正在创建一个包含数百行的数据网格,每行包含一个复选框,以便用户可以从网格中选择一个项目。

现在,用户可能会花费大量时间过滤/搜索网格并勾选所需的复选框,只是意外按下键盘上的退格键或单击页面上的超链接。他们会丢失所有复选框。

所以我想介绍一些功能,如果至少勾选了一个复选框,那么如果用户无意中执行了一个可以将其导航离开页面的操作,则会显示一条JavaScript确认消息,通知用户这个

复选框都属于同一个组,例如它将被称为“产品”。

这可以吗?

1 个答案:

答案 0 :(得分:11)

当用户离开时会发生beforeunload事件:http://jsfiddle.net/FprNV/1/

返回一个字符串会导致出现带有两个按钮的消息(保持/导航);这个对话框的确切实现因浏览器而异。

$(window).bind('beforeunload', function() {
    var checkboxcount = $("input:checkbox:checked").length;
    if(checkboxcount > 0) {
        return 'Are you sure?';
    }
});