我的申请表里有几页表格。
如何确保表单的安全性,以便在用户导航离开或关闭浏览器选项卡时,提示他们确认是否确实希望保留未保存数据的表单?
我的申请表里有几页表格。
如何确保表单的安全性,以便在用户导航离开或关闭浏览器选项卡时,提示他们确认是否确实希望保留未保存数据的表单?
当前回答
下面的一句话对我很管用。
window.onbeforeunload = s => modified ? "" : null;
根据应用程序的状态将modified设置为true或false。
其他回答
增加@codecaster的想法 您可以将此添加到表单的每个页面(在我的情况下,我以全局方式使用它,因此只有在表单上才会有此警告)将其函数更改为
if ( formSubmitting || document.getElementsByTagName('form').length == 0)
同时在表单提交上添加包括登录和取消按钮的链接,这样当人们按下取消或提交表单时,就不会在没有表单的每一页中触发警告…
<a class="btn btn-danger btn-md" href="back/url" onclick="setFormSubmitting()">Cancel</a>
查看JavaScript onbeforeunload事件。它是微软引入的非标准JavaScript,但是它可以在大多数浏览器中运行,他们的onbeforeunload文档有更多的信息和示例。
var unsaved = false;
$(":input").change(function () {
unsaved = true;
});
function unloadPage() {
if (unsaved) {
alert("You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?");
}
}
window.onbeforeunload = unloadPage;
建在Wasim A的顶部。使用序列化的好主意。这里的问题是,在提交表单时也显示了警告。这里已经修好了。
var isSubmitting = false
$(document).ready(function () {
$('form').submit(function(){
isSubmitting = true
})
$('form').data('initial-state', $('form').serialize());
$(window).on('beforeunload', function() {
if (!isSubmitting && $('form').serialize() != $('form').data('initial-state')){
return 'You have unsaved changes which will not be saved.'
}
});
})
它已经在Chrome和IE 11上进行了测试。
下面的一句话对我很管用。
window.onbeforeunload = s => modified ? "" : null;
根据应用程序的状态将modified设置为true或false。