本文翻译自:Warn user before leaving web page with unsaved changes
I have some pages with forms in my application. 我的应用程序中有一些带有表单的页面。
How can I secure the form in such a way that if someone navigates away or closes the browser tab, they should be prompted to to confirm they really want to leave the form with unsaved data? 我如何以某种方式保护表单,如果有人导航或关闭浏览器选项卡,应该提示他们确认他们确实要保留未保存的数据?
#1楼
参考:https://stackoom.com/question/UhYX/在离开网页之前进行未保存的更改之前警告用户
#2楼
Based on the previous answers, and cobbled together from various places in stack overflow, here is the solution I came up with which handles the case when you actually want to submit your changes: 根据先前的答案,并从堆栈溢出的各个地方进行凑整,这是我想出的解决方案,用于解决您实际要提交更改的情况:
window.thisPage = window.thisPage || {};
window.thisPage.isDirty = false;
window.thisPage.closeEditorWarning = function (event) {
if (window.thisPage.isDirty)
return 'It looks like you have been editing something' +
' - if you leave before saving, then your changes will be lost.'
else
return undefined;
};
$("form").on('keyup', 'textarea', // You can use input[type=text] here as well.
function () {
window.thisPage.isDirty = true;
});
$("form").submit(function () {
QC.thisPage.isDirty = false;
});
window.onbeforeunload = window.thisPage.closeEditorWarning;
It's worth noting that IE11 seems to require that the closeEditorWarning
function returns undefined
for it not to show an alert. 值得注意的是,IE11似乎要求closeEditorWarning
函数返回undefined
以便不显示警报。
#3楼
via jquery 通过jQuery
$('#form').data('serialize',$('#form').serialize()); // On load save form current state
$(window).bind('beforeunload', function(e){
if($('#form').serialize()!=$('#form').data('serialize'))return true;
else e=null; // i.e; if form state change show warning box, else don't show it.
});
You can Google JQuery Form Serialize function, this will collect all form inputs and save it in array. 您可以使用Google JQuery表单序列化功能,该功能将收集所有表单输入并将其保存在数组中。 I guess this explain is enough :) 我想这解释就足够了:)
#4楼
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;
#5楼
Adding to te idea of @codecaster you could add this to every page with a form (in my case i use it in global way so only on forms would have this warn) change his function to 添加@codecaster的想法,您可以将此表单添加到每个页面中(在我的情况下,我以全局方式使用它,因此仅在表单上会有此警告),将其功能更改为
if ( formSubmitting || document.getElementsByTagName('form').length == 0)
Also put on forms submit including login and in cancel buttons links so when person press cancel or submit the form won't trigger the warn also in every page witouth a form... 还放置表单提交,包括登录和“取消”按钮链接,因此当用户按下“取消”或提交表单时,表单的每一页也不会触发警告...
<a class="btn btn-danger btn-md" href="back/url" onclick="setFormSubmitting()">Cancel</a>
#6楼
You could check for a detailed explanation here: http://techinvestigations.redexp.in/comparison-of-form-values-on-load-and-before-close/ comparison-of-form-values-on-load-and-before-close 您可以在此处检查详细说明: http : //techinvestigations.redexp.in/comparison-of-form-values-on-load-and-before-close/comparative-of-form-values-on-load-and -收盘前
The main code: 主要代码:
function formCompare(defaultValues, valuesOnClose) {
// Create arrays of property names
var aPropsFormLoad = Object.keys(defaultValues);
var aPropsFormClose = Object.keys(valuesOnClose);
// If number of properties is different,
// objects are not equivalent
if (aPropsFormLoad.length != aPropsFormClose.length) {
return false;
}
for (var i = 0; i < aPropsFormLoad.length; i++) {
var propName = aPropsFormLoad[i];
// If values of same property are not equal,
// objects are not equivalent
if (defaultValues[aPropsFormLoad]+"" !== valuesOnClose[aPropsFormLoad]+"") {
return false;
}
}
// If we made it this far, objects
// are considered equivalent
return true;
}
//add polyfill for older browsers, as explained on the link above
//use the block below on load
for(i=0; i < document.forms[0].elements.length; i++){
console.log("The field name is: " + document.forms[0].elements[i].name +
" and it’s value is: " + document.forms[0].elements[i].value );
aPropsFormLoad[i] = document.forms[0].elements[i].value;
}
//create a similar array on window unload event.
//and call the utility function
if (!formCompare(aPropsOnLoad, aPropsOnClose))
{
//perform action:
//ask user for confirmation or
//display message about changes made
}