`
wjboy49
  • 浏览: 284745 次
  • 性别: Icon_minigender_1
  • 来自: 湖南岳阳
社区版块
存档分类
最新评论

编辑页面离开提醒:“您的内容已改变,是否保存修改”

阅读更多

1.添加window.onbeforeunload函数

<script language=”javascript”>
function   window.onbeforeunload(){
event.returnValue = “页面值已经修改,是否真的不保存?”;  //提示内容
}
</script>

2.如何避免进行提交时也错误的进行离开提醒呢?

(1)在表单中建立一个hidden的对象,用来判断是否点击了提交按钮,默认值为0

<input type=”hidden” name=”clickonsub” value=”0″ />

(2)在onsubmit或其它提交验证函数的最后,即验证结束,开始提交之前把这个对象赋值为1

document.release.clickonsub.value=”1″;   //供离开页面提醒用

(3)把window.onbeforeunload函数修改为如下样式,即增加对这个对象值的判断,为1时才提醒

<script language=”javascript”>
function   window.onbeforeunload(){
if(document.release.clickonsub.value==0){
event.returnValue = “页面值已经修改,是否真的不保存?”;  //提示内容
}
}
</script>

(4)还可以增加页面内容是否修改的判断

3.其它问题,网上有人这样说,但我没发现有这问题

引起当前页面发生跳转主要3类事件:
1、对浏览器窗口的操作,比如关闭浏览器、go home、backward、forward和refresh等;
2、对于网页的Navigatie操作,比如点击链接、在地址栏中执行新的地址、页面表单提交到非当前页面等;
3、脚本代码引起的页面Navigate操作,比如执行navigate、locatoin方法(replace, reload, assign)和修改location属性(href, search)等。
以上的1-2类操作引起onbeforeunload的事件,使用起来基本没有任何的问题,可是执行第3类页面条转操作却有点小问题。就是在上图的窗口出 现后,如果点选”OK”,确实就OK,页面正确跳转了。可是如果这个时候,我们点选”Cancel”,却会出现一个脚本异常

解决方法就是把脚本调用try一下,但这似乎是IE的一个bug的说。

编辑页面离开提醒 try
编辑页面离开提醒编辑页面离开提醒编辑页面离开提醒 {
编辑页面离开提醒 // 编辑页面离开提醒
编辑页面离开提醒 event.returnValue = ”You will lose any unsaved content”;
编辑页面离开提醒 // 编辑页面离开提醒
编辑页面离开提醒 }
编辑页面离开提醒编辑页面离开提醒 catch(e)编辑页面离开提醒 {}

4.本人的实例代码

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd “>
<html xmlns=”http://www.w3.org/1999/xhtml “>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
<script language=”javascript”>
function   window.onbeforeunload(){
if(document.release.title.value!=”" && document.release.clickonsub.value==0){
event.returnValue = “即将离开页面,是否真的不保存?”;
}
}
</script>

</head>

<body>
<div style=”width:480px; margin:100px auto”>
<p style=”text-align:center;”>内容为空则不提醒,内容非空则离开提醒,点击提交按钮则不提醒</p><br /><br /><br />
<p style=”float:right; margin-right:60px;”><a href=”http://hi.baidu.com/tjt999 “>离开测试</a></p>
<p style=”float:left; margin-left:60px;”><form action=”a.php” method=”post” name=”release” enctype=”multipart/form-data”>
<input type=”text” name=”title” />
<input type=”hidden” name=”clickonsub” value=”0″ />
<input type=”submit” value=”提交” onclick=”return check()” />
</form>
</p>
</div>
</body>
</html>

<script language=”javascript”>
function check(){
if(document.release.title.value==”"){
alert(“内容不能为空”);
return false;
}
document.release.clickonsub.value=1;
return true;
}
</script>
 
分享到:
评论

相关推荐

    js 实现在离开页面时提醒未保存的信息(减少用户重复操作)

    如果用户在填写了表单或编辑了某些内容但未保存就离开了页面,那么这些未保存的信息可能会丢失。这会导致用户感到困惑并不得不重新输入信息,从而降低了工作效率和满意度。为了解决这个问题,我们可以使用JavaScript...

    navigate-away-js:当用户使用Backbone离开未保存修改的页面时发出警告

    在这个场景中,我们关注的是一个名为"navigate-away-js"的项目,它专为Backbone.js框架设计,目的是在用户离开页面时,如果他们对页面内容进行了未保存的修改,能够提供一个警告提示。Backbone.js是一款轻量级的MVC...

    解决Vue.js应用回退或刷新界面时提示用户保存修改问题

    这样,即使用户意外离开编辑页面,再次打开时仍能找回之前编辑的内容。实现这一功能的关键是监听`window`对象的`onbeforeunload`事件,该事件在页面即将卸载时触发。在Vue.js的`mounted`生命周期钩子中,我们可以...

    验证用户是否修改过页面的数据的实现方法

    首先,问题的起因在于在编辑模块中,我们需要能够在不提交的情况下检测到用户是否对页面内容进行了更改。这有助于提醒用户保存他们的修改,防止因意外关闭页面或导航离开而丢失信息。为了实现这一功能,我们需要考虑...

    程序天下:JavaScript实例自学手册

    16.12 判断表单是否已修改 16.13 判断控件的类型 16.14 密码强度检查 16.15 身份证的验证 16.16 JavaScript生成验证码 16.17 JavaScript生成验证码(二) 第17章 进度条、滚动条特效处理 17.1 使用符号制作的进度条 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    16.12 判断表单是否已修改 16.13 判断控件的类型 16.14 密码强度检查 16.15 身份证的验证 16.16 JavaScript生成验证码 16.17 JavaScript生成验证码(二) 第17章 进度条、滚动条特效处理 17.1 使用符号制作的进度条 ...

    浏览器事件大全.txt

    - **应用场景**:询问是否保存更改、提醒未完成操作等。 **2.3 onerror** - **定义**:当页面执行脚本发生错误时触发。 - **兼容性**:IE4、N3。 - **应用场景**:错误日志记录、异常处理。 **2.4 onload** - **...

    海天OA2009用户操作手册-海天网络协同办公系统用户手.docx

    - 用户可以根据实际情况更改自己的在线状态(如忙碌、离开等)。 - 有助于提高沟通效率。 **3.10 网络寻呼** - 类似即时通讯工具中的群聊功能。 - **个性设置**:允许用户自定义消息发送样式等。 - **消息群发**...

    电脑高手必备 Windows系统35招实用技巧

     因有急事而需要离开,但又不希望电脑进行系统注销,该怎么办?你完 全可以通过双击桌面快捷方式来迅速锁定键盘和显示器,且无需使用 “Ctrl+Alt+Del”组合键或屏幕保护程序。操作方法:在桌面上单击鼠标右 键,...

    确认退出等特效

    这类对话框通常用于提醒用户他们的操作可能会导致数据丢失或中断流程,比如在用户尝试离开一个未保存更改的页面时弹出的“确定退出”对话框。 **警告框**是这类对话框的一种,它通常带有警示图标,用于向用户传达...

    js仿微博实现统计字符和本地存储功能

    当字符数接近限制时,可以通过修改CSS样式来提醒用户,如改变颜色或加粗字体。当字符数超出限制时,同样可以添加特定的CSS类以提供视觉反馈。 以下是一个简单的实现: ```javascript // 默认设置 var defaults = {...

Global site tag (gtag.js) - Google Analytics