页面表单值改变未保存 离开页面给出相关提示
展开全部
第一种是用户进入页面的时候表单为空（例如发表新评论），用户离开的时候有可能表单为空，则不提示，表单有改变但未保存，则提示。实例如下：
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript">
function checkNew() {
var content = document.getElementById("content").value;
if(content !== "") {
return "内容已改变，点击“取消”保存表单。";
}
}
window.onbeforeunload = checkNew;
</script>
</head>
<body>
<form>
<textarea cols="50" rows="10" id="content"></textarea>
</form>
</body>
</html>
第二种是用户进入页面的时候表单不为空（例如编辑评论），用户离开的时候有可能表单内容没有改变，则不提示，表单和进入页面的时候内容有差异但未保存，则提示。实例如下：
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript">
var originalContent;
window.onload = getOriginal;
function getOriginal() {
originalContent = document.getElementById("content").value;
}
function checkEdit() {
var newContent = document.getElementById('content').value;
if(newContent !== originalContent) {
return "内容已改变，点击“取消”保存表单。";
}
}
window.onbeforeunload = checkEdit;
</script>
</head>
<body>
<form>
<textarea cols="50" rows="10" id="content">原始内容，原始内容，原始内容，原始内容</textarea>
</form>
</body>
</html>
================
我给出的例子是最基本的框架，其它例如提示信息，如何保存等还要进一步优化。
例子中使用的编码为 utf-8，注意保存时使用相同编码以免出现乱码。
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript">
function checkNew() {
var content = document.getElementById("content").value;
if(content !== "") {
return "内容已改变，点击“取消”保存表单。";
}
}
window.onbeforeunload = checkNew;
</script>
</head>
<body>
<form>
<textarea cols="50" rows="10" id="content"></textarea>
</form>
</body>
</html>
第二种是用户进入页面的时候表单不为空（例如编辑评论），用户离开的时候有可能表单内容没有改变，则不提示，表单和进入页面的时候内容有差异但未保存，则提示。实例如下：
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript">
var originalContent;
window.onload = getOriginal;
function getOriginal() {
originalContent = document.getElementById("content").value;
}
function checkEdit() {
var newContent = document.getElementById('content').value;
if(newContent !== originalContent) {
return "内容已改变，点击“取消”保存表单。";
}
}
window.onbeforeunload = checkEdit;
</script>
</head>
<body>
<form>
<textarea cols="50" rows="10" id="content">原始内容，原始内容，原始内容，原始内容</textarea>
</form>
</body>
</html>
================
我给出的例子是最基本的框架，其它例如提示信息，如何保存等还要进一步优化。
例子中使用的编码为 utf-8，注意保存时使用相同编码以免出现乱码。
追问
你说的这个只是针对于一个特定的textarea 如果也能有很多input输入框等 不实用啊
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
