在离开网页之前进行未保存的更改之前警告用户

本文翻译自：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 }