编辑页面离开提醒：“系统可能不会保存您所做的更改。”
Posted lccsdncnblogs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了编辑页面离开提醒：“系统可能不会保存您所做的更改。”相关的知识，希望对你有一定的参考价值。
问题 ：编辑好的页面信息，忘记点击提交按钮，直接刷新界面导致数据未提交直接清空，仍需再重新填写问题。
解决方案：onbeforeunload 事件发多少
实例：
<body onbeforeunload="return myFunction()">
onbeforeunload=“return true“ 无弹框提醒
onbeforeunload=“return false“ 弹框提醒
定义语法：
onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。
该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。
对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 "确定要离开此页吗？"。该信息不能删除。
思路：
- 根据以上信息可得出，onbeforeunload 只要返回为 false 就显示提示信息
- 默认onbeforeunload 返回为 true点击刷新不显示任何提示
- 监听该页面输入事件，当监听到该页面无任何数据改动时，刷新当前页面不做任何提示。
- 监听到只要有一个文本发生变化，就设置为false。
关键 代码：
<script>
//显示提示框
var isShow = true;
function exitPrompt() {
if (!isShow) {
return false;
}
}
//改变保存状态为false换页面要提示
function ChangeStateFalse() {
isShow = false;
}
//改变保存状态为true不提示
function ChangeStateTrue() {
isShow = true;
}
/**
* 监听-所有可能改动的文本内容 包括input ,textarea,ue富文本，只要监听到有编辑文本的行为，就可视位需要有弹框提示
* 编辑或添加页面加载时就要加载该方法
*/
function eventListenFormChange(){
$("input").each(function () {
//数据改变事件，只要数据变动就触发当前事件，改变isShow为false
$(this).bind(‘input propertychange‘,function(e){
ChangeStateFalse()
//console.log($(this).val()) //调试时使用-可删除
})
})
$("textarea").each(function () {
$(this).bind(‘input porpertychange‘,function(){
ChangeStateFalse()
// console.log($(this).val())
});
})
// env.ueditor 为ue地址 可改为你的ue地址 UE.getEditor(‘content‘,{})
env.ueditor.addListener("keyup",function(){
ChangeStateFalse()
//var arr =(UE.getEditor(‘content‘).getContentTxt());
// console.log(arr)
})
}
</script>
<body onbeforeunload="return exitPrompt()" >
效果图：
以上是关于编辑页面离开提醒：“系统可能不会保存您所做的更改。”的主要内容，如果未能解决你的问题，请参考以下文章