编辑页面离开提醒:“系统可能不会保存您所做的更改。”

问题 :编辑好的页面信息,忘记点击提交按钮,直接刷新界面导致数据未提交直接清空,仍需再重新填写问题。

解决方案:onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发

复制代码
实例:
<body onbeforeunload="return myFunction()">
onbeforeunload=“return true“     无弹框提醒
onbeforeunload=“return false“    弹框提醒 
定义语法:
onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。
该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。
对话框默认的提示信息根据不同的浏览器有所不同,标准的信息类似
"确定要离开此页吗?"。该信息不能删除。

复制代码

思路:

  1. 根据以上信息可得出,onbeforeunload 只要返回为 false 就显示提示信息
  2. 默认onbeforeunload 返回为 true点击刷新不显示任何提示
  3. 监听该页面输入事件,当监听到该页面无任何数据改动时,刷新当前页面不做任何提示。 
  4. 监听到只要有一个文本发生变化,就设置为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()" >
复制代码

 

效果图:

  

posted @   lanwf  阅读(16034)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
点击右上角即可分享
微信分享提示