我的应用程序中有一些表单。
如何以这样的方式保护表单：如果有人导航或关闭浏览器标签，则应提示他们确认他们确实要将表单保留为未保存的数据？
答案 0 :(得分：489)
您可以handling the beforeunload event and returning a non-null string执行此操作：
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = 'It looks like you have been editing something. '
+ 'If you leave before saving, your changes will be lost.';
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
});
这种方法的问题在于提交表单也会触发卸载事件。通过添加您提交表单的标志，可以轻松解决此问题：
var formSubmitting = false;
var setFormSubmitting = function() { formSubmitting = true; };
window.onload = function() {
window.addEventListener("beforeunload", function (e) {
if (formSubmitting) {
return undefined;
}
var confirmationMessage = 'It looks like you have been editing something. '
+ 'If you leave before saving, your changes will be lost.';
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
});
};
然后在提交时调用setter：
<form method="post" onsubmit="setFormSubmitting()">
<input type="submit" />
</form>
但请继续阅读...
当用户未对表单上的任何内容进行更改时，您也不希望显示此消息。一种解决方案是将beforeunload事件与“脏”标志结合使用，只有当它真正相关时才触发提示。
var isDirty = function() { return false; }
window.onload = function() {
window.addEventListener("beforeunload", function (e) {
if (formSubmitting || !isDirty()) {
return undefined;
}
var confirmationMessage = 'It looks like you have been editing something. '
+ 'If you leave before saving, your changes will be lost.';
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
});
};
现在要实现isDirty方法，有各种方法。
您可以使用jQuery and form serialization，但这种方法存在一些缺陷。首先，你必须改变代码才能在任何形式上工作（$("form").each()会这样做），但最大的问题是jQuery的serialize()只能用于命名的非禁用元素，因此更改任何禁用的或未命名的元素不会触发脏标志。 There are workarounds for that，就像只读控件而不是启用，序列化然后再次禁用控件一样。
所以事件似乎要走了。您可以尝试listening for keypresses。这个事件有一些问题：
change event也doesn't trigger on values set from JavaScript code，因此也不适用于虚拟输入。
Binding the input event to all inputs (and textareas and selects)位于您的网页won't work on older browsers上，并且与上述所有事件处理解决方案一样，不支持撤消。当用户更改文本框然后撤消该文本框，或者选中并取消选中复选框时，该表单仍被视为脏。
当你想要实现更多行为时，比如忽略某些元素，你还有更多工作要做。
因此，在您考虑实施这些解决方案和所有必需的解决方法之前，要意识到您正在重新发明轮子并且您很容易遇到其他人已经为您解决的问题。
如果您的应用程序已经使用了jQuery，那么您也可以使用经过测试，维护的代码而不是自己编写代码，并使用第三方库来实现所有这些。 jQuery's Are You Sure? plugin效果很好，请看demo page。就这么简单：
<script src="jquery.are-you-sure.js"></script>
<script>
$(function() {
$('#myForm').areYouSure(
{
message: 'It looks like you have been editing something. '
+ 'If you leave before saving, your changes will be lost.'
}
);
});
</script>
请注意Firefox 4在此对话框中不支持自定义消息。截至上个月，Chrome 51正在推出in which custom messages are also being removed。
本网站的其他地方也存在一些替代方案，但我认为这样的对话很清楚：
您想离开此网站吗？
您所做的更改可能无法保存。
离开 留下
答案 1 :(得分：72)
查看JavaScript onbeforeunload event。它是Microsoft推出的非标准JavaScript，但它适用于大多数浏览器，their onbeforeunload documentation有更多信息和示例。
答案 2 :(得分：32)
通过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.
});
您可以使用Google JQuery Form Serialize功能，这将收集所有表单输入并将其保存在数组中。我想这个解释就足够了:)）
答案 3 :(得分：8)
通用解决方案，无需自动检测所有输入修改的配置，包括可信任的元素：
"use strict";
(() => {
const modified_inputs = new Set;
const defaultValue = "defaultValue";
// store default values
addEventListener("beforeinput", (evt) => {
const target = evt.target;
if (!(defaultValue in target || defaultValue in target.dataset)) {
target.dataset[defaultValue] = ("" + (target.value || target.textContent)).trim();
}
});
// detect input modifications
addEventListener("input", (evt) => {
const target = evt.target;
let original;
if (defaultValue in target) {
original = target[defaultValue];
} else {
original = target.dataset[defaultValue];
}
if (original !== ("" + (target.value || target.textContent)).trim()) {
if (!modified_inputs.has(target)) {
modified_inputs.add(target);
}
} else if (modified_inputs.has(target)) {
modified_inputs.delete(target);
}
});
addEventListener("beforeunload", (evt) => {
if (modified_inputs.size) {
const unsaved_changes_warning = "Changes you made may not be saved.";
evt.returnValue = unsaved_changes_warning;
return unsaved_changes_warning;
}
});
})();
答案 4 :(得分：7)
基于之前的答案，并从堆栈溢出的各个位置拼凑而成，这是我提出的解决方案，当您实际想要提交更改时处理案例：
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;
值得注意的是，IE11似乎要求closeEditorWarning函数返回undefined，因为它不会显示警告。
答案 5 :(得分：6)
以下单行代表对我有用。
window.onbeforeunload = s => modified ? "" : null;
只需将modified设置为 true 或 false ，具体取决于您的应用程序的状态。
答案 6 :(得分：6)
建立在Wasim A.'s顶上，可以使用序列化。问题在于，提交表单时也会显示警告。该问题已在此处修复。
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中进行了测试。
答案 7 :(得分：4)
以下代码效果很好。您需要访问表单元素＆＃39;通过id属性输入更改：
var somethingChanged=false;
$('#managerForm input').change(function() {
somethingChanged = true;
});
$(window).bind('beforeunload', function(e){
if(somethingChanged)
return "You made some changes and it's not saved?";
else
e=null; // i.e; if form state change show warning box, else don't show it.
});
});
答案 8 :(得分：3)
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;
答案 9 :(得分：1)
您可以在此处查看详细说明： http://techinvestigations.redexp.in/comparison-of-form-values-on-load-and-before-close/ 比较-的外形值上的负载和前闭
主要代码：
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
}
答案 10 :(得分：1)
添加@codecaster的想法 你可以将这个添加到每个带有表单的页面（在我的情况下，我以全局方式使用它，因此只有表单会有此警告）将其功能更改为
if ( formSubmitting || document.getElementsByTagName('form').length == 0)
还提交表格提交，包括登录和取消按钮链接，所以当有人按下取消或提交表格时也不会触发警告也会在每个页面中显示一个表格......
<a class="btn btn-danger btn-md" href="back/url" onclick="setFormSubmitting()">Cancel</a>
答案 11 :(得分：1)
简短答案：
let pageModified = true
window.addEventListener("beforeunload",
() => pageModified ? 'Close page without saving data?' : null
)
答案 12 :(得分：1)
Eerik Sven Puudist的解决方案...
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.'
}
});
})
...在复杂的面向对象设置中自发地为我完成了工作，而无需进行任何更改。
我应用的唯一更改是引用称为“ formForm”（“ form”->“ #formForm”）的具体形式（每个文件仅一个表单）：
<form ... id="formForm" name="formForm" ...>
特别出色的是，提交按钮处于“单独放置”状态。
此外，它也适用于最新版本的Firefox（截至2019年2月7日）。
答案 13 :(得分：1)
您可以使用serialize（）通过序列化表单值来创建URL编码的文本字符串，并在卸载前检查表单是否已更改
$(document).ready(function(){
var form = $('#some-form'),
original = form.serialize()
form.submit(function(){
window.onbeforeunload = null
})
window.onbeforeunload = function(){
if (form.serialize() != original)
return 'Are you sure you want to leave?'
}
})
引用此链接https://coderwall.com/p/gny70a/alert-when-leaving-page-with-unsaved-form 由弗拉基米尔·西多连科撰写
答案 14 :(得分：0)
测试了Eli Grey的通用解决方案，只有在我将代码简化为
'use strict';
(() => {
const modified_inputs = new Set();
const defaultValue = 'defaultValue';
// store default values
addEventListener('beforeinput', evt => {
const target = evt.target;
if (!(defaultValue in target.dataset)) {
target.dataset[defaultValue] = ('' + (target.value || target.textContent)).trim();
}
});
// detect input modifications
addEventListener('input', evt => {
const target = evt.target;
let original = target.dataset[defaultValue];
let current = ('' + (target.value || target.textContent)).trim();
if (original !== current) {
if (!modified_inputs.has(target)) {
modified_inputs.add(target);
}
} else if (modified_inputs.has(target)) {
modified_inputs.delete(target);
}
});
addEventListener(
'saved',
function(e) {
modified_inputs.clear()
},
false
);
addEventListener('beforeunload', evt => {
if (modified_inputs.size) {
const unsaved_changes_warning = 'Changes you made may not be saved.';
evt.returnValue = unsaved_changes_warning;
return unsaved_changes_warning;
}
});
})();
对他的修改删除了target[defaultValue]的用法，仅使用target.dataset[defaultValue]来存储真实的默认值。
我添加了一个“保存的”事件侦听器，当成功执行保存操作后，您将触发“保存的”事件。
但是这种“通用”解决方案仅适用于浏览器，不适用于应用程序的Webview（例如，微信浏览器）。
为了使其（部分地）在微信浏览器中工作，再次进行了另一项改进：
'use strict';
(() => {
const modified_inputs = new Set();
const defaultValue = 'defaultValue';
// store default values
addEventListener('beforeinput', evt => {
const target = evt.target;
if (!(defaultValue in target.dataset)) {
target.dataset[defaultValue] = ('' + (target.value || target.textContent)).trim();
}
});
// detect input modifications
addEventListener('input', evt => {
const target = evt.target;
let original = target.dataset[defaultValue];
let current = ('' + (target.value || target.textContent)).trim();
if (original !== current) {
if (!modified_inputs.has(target)) {
modified_inputs.add(target);
}
} else if (modified_inputs.has(target)) {
modified_inputs.delete(target);
}
if(modified_inputs.size){
const event = new Event('needSave')
window.dispatchEvent(event);
}
});
addEventListener(
'saved',
function(e) {
modified_inputs.clear()
},
false
);
addEventListener('beforeunload', evt => {
if (modified_inputs.size) {
const unsaved_changes_warning = 'Changes you made may not be saved.';
evt.returnValue = unsaved_changes_warning;
return unsaved_changes_warning;
}
});
const ua = navigator.userAgent.toLowerCase();
if(/MicroMessenger/i.test(ua)) {
let pushed = false
addEventListener('needSave', evt => {
if(!pushed) {
pushHistory();
window.addEventListener("popstate", function(e) {
if(modified_inputs.size) {
var cfi = confirm('确定要离开当前页面嘛？' + JSON.stringify(e));
if (cfi) {
modified_inputs.clear()
history.go(-1)
}else{
e.preventDefault();
e.stopPropagation();
}
}
}, false);
}
pushed = true
});
}
function pushHistory() {
var state = {
title: document.title,
url: "#flag"
};
window.history.pushState(state, document.title, "#flag");
}
})();
答案 15 :(得分：0)
我做了不同的事情，在这里分享，以便某人可以得到帮助，仅使用Chrome进行测试。
我只想在有一些更改的情况下，在关闭选项卡之前警告用户。
<input type="text" name="field" value="" class="onchange" />
var ischanged = false;
$('.onchange').change(function () {
ischanged = true;
});
window.onbeforeunload = function (e) {
if (ischanged) {
return "Make sure to save all changes.";
}
};
效果很好，但是还有另一个问题，当我提交表单时收到了不必要的警告，我看到了很多解决方法，这是因为onbeforeunload在onsubmit之前触发，这就是为什么我们不能在onsubmit事件中处理它类似于onbeforeunload = null，但是在这两个事件之前都会触发“提交”按钮的onclick事件，因此我更新了代码
var isChanged = false;
var isSubmit = false;
window.onbeforeunload = function (e) {
if (isChanged && (!isSubmit)) {
return "Make sure to save all changes.";
}
};
$('#submitbutton').click(function () {
isSubmit = true;
});
$('.onchange').change(function () {
isChanged = true;
});
答案 16 :(得分：-1)
我编写了以下代码。它可以比较所有字段（用.ignoreDirty类标记的字段除外）中的更改，或仅对当前可见的字段进行比较。可以为Javascript添加的新字段重新初始化它。因此，我不保存表单状态，而是保存每个控件的状态。
/* Dirty warning for forms */
dirty = (skipHiddenOrNullToInit) => {
/* will return True if there are changes in form(s)
for first initialization you can use both: .dirty(null) or .dirty() (ignore its result)
.dirty(null) will (re)initialize all controls - in addititon use it after Save if you stay on same page
.dirty() will initialize new controls - in addititon use it if you add new fields with JavaScript
then
.dirty() (or: .dirty(false)) says if data are changed without regard to hidden fields
.dirty(true) says if data are changed with regard to hidden fields (ie. fields with .d-none or .hidden class)
controls with .ignoreDirty class will be skipped always
previous about .d-none, .hidden, .ignoreDirty applies to the control itself and all its ancestors
*/
let isDirty = false;
let skipSelectors = '.ignoreDirty';
if (skipHiddenOrNullToInit) {
skipSelectors += ', .d-none, .hidden'
} else if (skipHiddenOrNullToInit === undefined) {
skipHiddenOrNullToInit = false;
}
$('input, select').each(
function(_idx, el) {
if ($(el).prop('type') !== 'hidden') {
let dirtyInit = $(el).data('dirty-init');
if (skipHiddenOrNullToInit === null || dirtyInit === undefined) {
try {
isChromeAutofillEl = $(el).is(":-webkit-autofill");
} catch (error) {
isChromeAutofillEl = false;
}
if (isChromeAutofillEl && $(el).data('dirty-init') === undefined) {
setTimeout(function() { // otherwise problem with Chrome autofilled controls
$(el).data('dirty-init', $(el).val());
}, 200)
} else {
$(el).data('dirty-init', $(el).val());
}
} else if ($(el).closest(skipSelectors).length === 0 && dirtyInit !== $(el).val()) {
isDirty = true;
return false; // breaks jQuery .each
}
}
}
);
return isDirty;
}
我对Chrome自动填充值还有其他麻烦，因为很难初始化和加载它们。因此，我不会在页面加载时进行初始化，而是在任何focusin事件中进行初始化。 （但是：使用JavaScript更改控制值可能仍然存在问题。）我使用以下代码，这些代码在页面加载时调用：
let init_dirty = (ifStayFunc) => {
/* ifStayFunc: optional callback when user decides to stay on page
use .clearDirty class to avoid warning on some button, however:
if the button fires JavaScript do't use .clearDirty class and instead
use directly dirty(null) in code - to be sure it will run before window.location */
$('input, select').on('focusin', function(evt) {
if (!$('body').data('dirty_initialized')) {
dirty();
$('body').data('dirty_initialized', true);
}
});
window.addEventListener('beforeunload', (evt) => {
if (dirty(true)) {
if (ifStayFunc) {
ifStayFunc();
}
evt.preventDefault();
evt.returnValue = ''; // at least Google Chrome requires this
}
});
$('.clearDirty').on('click', function(evt) {
dirty(null);
});
};
因此，我将.clearDirty类添加到提供“保存”的按钮中，这样在这种情况下，我可以避免发出警告。 如果用户在收到警告时仍停留在Page上，则ifStayFunc允许我执行某些操作。通常，我可以显示其他“保存按钮”（如果我仍然只看到一些默认/主按钮，这将使Safe + SomethingMore-并且我希望允许将此“ SomethingMore”保存下来。）
答案 17 :(得分：-4)
首先，大多数浏览器默认都有此功能。 为什么你需要这个呢？为什么不保持表单同步？我的意思是，保存在任何更改，而无需等待用户提交任何内容。像Google Contacts一样。当然，如果只有表格中的所有字段都是强制性的。用户不喜欢当他们强行填补某些东西而没有机会去思考他们是否需要它。 ：）