网站未保存离开提醒 onbeforeunload 事件

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

解决方案:onbeforeunload 事件

实例:

onbeforeunload=“return true“     无弹框提醒
onbeforeunload=“return false“    弹框提醒 
定义语法:
onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。

该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。

对话框默认的提示信息根据不同的浏览器有所不同,标准的信息类似 "确定要离开此页吗?"。该信息不能删除。

思路:

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

关键 代码:

    

 

效果图:

网站未保存离开提醒 onbeforeunload 事件_第1张图片

  

你可能感兴趣的:(js)