js 离开当前页面提示

最新推荐文章于 2023-02-21 21:47:41 发布

alf_cee

最新推荐文章于 2023-02-21 21:47:41 发布

阅读量963

点赞数

分类专栏： Web 前端文章标签： function html xhtml input class jquery

本文链接：https://blog.csdn.net/lihe2008125/article/details/6695266

版权

Web 前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

需求：当用户离开html 页面时，希望给用户弹出一个提示，以免丢失用户输入的信息。

实现：使用了jquery 。 html 代码如下。

<!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=utf-8" />
<title>cookie</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">

var IsModifyed = false; /*当前页是否触发修改点*/
function SetBeforeunload(modify) { 
	IsModifyed = !!modify; 
	window.onbeforeunload = IsModifyed ? function() { return "你尚未保存，确定离开吗?"; } : null; }

$(function() {
    SetBeforeunload(false);
    /*取消 修改动作*/
    $(".cancelmodifymarks").click(function() {
        SetBeforeunload(false);
    });
    /*修改动作 标记*/
    $(".modifymarks").click(function() {
        SetBeforeunload(true);
    });
});
</script>
</head>
<body>
AAA
<input class="cancelmodifymarks" type="text" value="AAA"/>
ccc
<input class="modifymarks" type="text" value="ccc"/>

</body>
</html>

效果：点击值为"ccc" 的Input 框，离开本html 页面(如：IE 的刷新，关闭等)，会有提示信息。在点击值为"AAA" 的Input 框，离开页面时，不会有提示信息。