zoukankan      html  css  js  c++  java
  • 表单内容修改后询问是否离开当前页

    需求---问题

    在填写页面表单的时候,有时候会不小心离开正在编辑的表单页面,或者不小心点了F5刷新页面。辛辛苦苦编写的表单内容没了,如何在用户离开已经修改过的表单时友好的提示用户,正如博客园添加文章时,询问用户是否离开页面??

    以下是博客园文章编辑页面按F5刷新时的提示

    还有一种情况是关闭当前页面,显示另外一种提示信息

    方法分析:

    博客园也是在window对象上注册了onbeforeunload事件

    用到的知识点:

     onbeforeunload事件,onbeforeunload事件是在浏览器刷新或关闭是触发,该事件可以在window,body元素,其他元素上绑定,并且用returnValue返回提示文字;

     触发该事件时会弹出像confirm一样的弹框,询问用户是离开页面还是继续留在本页

    应用延伸:

    在实际开发中更多用的情况是在当前页面的表单内容发生改变,用户可能离开当前页时询问是否重新加载;

      添加一个方法,在重新加载页面或离开时页面时检查表单是否被修改过,如果修改了就询问是否重新加载,没有修改则直接离开页面;

       var f="";
        $(window).load(function(){
            f=$('form').serialize();
        })
        window.onbeforeunload=function(){ 
            if(hasChanged($('form'), f))
                return '是否离开当前页面'
        }
        function hasChanged(elem, str){
            if(elem.serialize()== str){
                return false;
            }
            return true
        }
  • 相关阅读:
    pipenv install
    git删除缓存区中文件
    zsh切换bash bash切换zsh
    Mac下安装allure
    Linux基础命令之tail动态显示日志文件时关键字有颜色、高亮显示
    CentOS添加tailf命令
    阿里云服务器添加安全组,允许url+端口访问
    pytest中用例的识别与运行
    [转] 使用webpack4提升180%编译速度
    [转] 默认分包策略
  • 原文地址:https://www.cnblogs.com/zhang-jian/p/5264137.html
Copyright © 2011-2022 走看看