2011-07-24 65 views
6

防止丢失表单数据我正在创建一个包含数百行的数据网格,每行包含一个复选框,以便用户可以从网格中选择一个项目。通过导航离开页面

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

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

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

这可能吗?

+1

您是否尝试过查看HTML5的LocalStorage? – PhD

回答

10

当用户导航时出现beforeunload事件:http://jsfiddle.net/FprNV/1/

返回一个字符串会导致消息出现两个按钮(停留/导航);这个对话框的确切实现在不同浏览器上有所不同。

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

它是否也适用于通过发布不同的表单离开页面? – TMS

+1

这是跨浏览器兼容吗?浏览器可以禁用它吗? (有些页面误用了这个功能,当你试图关闭它们时真的很烦人) – TMS

+0

@Tomas Telensky:它适用于任何离开,也关闭窗口等。我不知道任何禁用它的方法,用户可以使用。不过,它在所有主流浏览器上都能正常工作。 ...除了Opera和Safari我现在看到。而且似乎只有Chrome实际显示了自定义消息,IE和Firefox显示了一个通用的内置消息。 – pimvdb