我正在尝试通过 javascript 检测文本、文本区域和下拉列表的更改,因此在窗口卸载时,浏览器会提示您有未保存的更改。我的代码与 IE 完美配合,但在 Chrome 中确实不稳定。这是我的代码。
var ctr = 1;
var isFirstLoad = true;
function propertyChangedByCode() {
ctr = 0;
propertyChanged()
}
function propertyChanged() {
$('[id$=SaveButton]').removeAttr("disabled");
$('[id$=SaveButton]').removeAttr("class");
$('[id$=SaveButton]').addClass("btn btn-primary");
warnMessage = 'Warning: You have unsaved changes.';
window.onbeforeunload = function () {
if (ctr == 0) {
return warnMessage
}
else if (ctr == 1) {
ctr = 0;
}
}
}
$("body").click(function (event) {
console.log(event.target);
if (event.target.type == "submit" && event.target.value != "Save" && event.target.value != "Cancel" && event.target.value != "Next") {
ctr = 0;
propertyChanged();
console.log("BODY clicked");
}
});
function pageLoad() {
jQuery("input.datepicker").dp({
dateFormat: 'M d, yy',
altFormat: 'yy-mm-dd',
buttonText: '<i class="icon icon-calendar"></i>',
showOn: 'both'
});
$("button.ui-datepicker-trigger").addClass('btn right');
console.log("PageOnLoad: " + ctr);
var warnMessage = 'Warning: You have unsaved changes.';
$('input[type="text"],select,textarea').each(function (k, v) {
var elem = $(this);
// Save current value of element
elem.data('oldVal', elem.val());
// Look for changes in the value
elem.bind("change keyup input paste", function (event) {
// If value has changed...
if (elem.data('oldVal') != elem.val()) {
propertyChanged();
}
});
});
$('.btn').click(function (e) {
console.log("whatever");
ctr = 1;
});
//ui-datepicker-trigger
$('.ui-datepicker-trigger').click(function (e) {
console.log("date");
ctr = 0;
});
if (isFirstLoad) {
window.onbeforeunload = null;
$('[id$=SaveButton]').attr("disabled", "disabled")
ctr = 1;
console.log("Disable");
isFirstLoad = false;
}
}
我使用 counter(ctr) 并根据情况将其更改为 1 和 0。但最终 ctr = 0 会触发通知,而 1 则相反。加载页面后,我离开页面时,即使我没有任何更改,浏览器也会提示。同样,此代码在 IE 中完美运行。我不能使用除此之外的其他解决方案,因为如果我更改当前程序,我将不得不更新很多页面。任何想法为什么 Chrome 不会运行 js?谢谢!
编辑:
调查代码后,这行似乎是导致问题的原因
elem.bind("change keyup input paste", function (event) {
ctr = 0;
// If value has changed...
if (elem.data('oldVal') != elem.val()) {
propertyChanged();
}
});
if 语句在 Chrome 中首次加载时返回 true,而在 IE 中返回 false。首次加载时应为假,因为首次加载时未进行任何更改。