• 微信
您当前的位置：首页  > 文章 >  css实现刷新页面的同时保存页面控件的输入值

css实现刷新页面的同时保存页面控件的输入值

作者：admin 时间:2020-01-16 阅读数：190人

css实现刷新页面的同时保存页面控件的输入值这个对于我们来讲是非常好用了，像有些页面不小心刷新了页面表单值就丢失了需要重新输入非常的麻烦，那么我们可以使用css来定义页面刷新值保存起来，具体设置如下。

 

在Head中加入<meta name="save" content="history">

添加css: input{behavior:url(#default#savehistory)};

e.g. 页面上存在<input type=text id="txttestsavehistory"/>

给 input输入值后刷新页面看看，输入的值还在

例子

 代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="save" content="history"> <title>www.zzarea.com</title> <mce:style type="text/css"><!-- input{behavior:url(#default#savehistory)}; --></mce:style><style type="text/css" mce_bogus="1">input{behavior:url(#default#savehistory)};</style> </head> <body> <DIV style="float:left" mce_style="float:left"> <ul> <li><label style="width:100px">hhhhh</label><input type="text" ></li> <li><label style="width:100px">sssssssssss</label><input type="text" > </li> </ul> </DIV>


还有一种真正的实现办法就是js ajax保存草稿功能

首先是表单页面：

 代码如下

<!-- 编写文章的文本域 -->
<textarea cols="10" rows="6" id="content"></textarea>
<!-- AutoSaveMsg显示返回信息 -->
<div id="AutoSaveMsg"></div>
<input type="button" onclick="AutoSaveRestore();" value="恢复最后保存的草稿">

<!-- 将JS代码放在所有对象之后，以免在页面未加载完成时出现对象不存在的错误 -->
<!-- AJAX类 -->
<script type="text/javascript" src="ajaxrequest.js"></script>
<!-- 自动保存代码 -->
<script type="text/javascript" src="autosave.js"></script>

=====以下代码存成autosave.js=====

 代码如下

// 要保存的内容对象FormContent
var FormContent=document.getElementById("content");
// 显示返回信息的对象
var AutoSaveMsg=document.getElementById("AutoSaveMsg");
// 自动保存时间间隔
var AutoSaveTime=60000;
// 计时器对象
var AutoSaveTimer;
// 首先设置一次自动保存状态
SetAutoSave();
// 自动保存函数
function AutoSave() 
{
// 如果内容为空，则不进行处理，直接返回
if(!FormContent.value) return;
// 创建AJAXRequest对象，
var ajaxobj=new AJAXRequest;
ajaxobj.url="inc/autosave.asp";
ajaxobj.content="postcontent="+escape(FormContent.value);
ajaxobj.callback=function(xmlObj) 
{
// 显示反馈信息
AutoSaveMsg.innerHTML=xmlObj.responseText;
}
ajaxobj.send();
}


// 设置自动保存状态函数
function SetAutoSave() 
{
AutoSaveTimer=setInterval("AutoSave()",AutoSaveTime);
}

// 恢复最后保存的草稿
function AutoSaveRestore()
{
// 创建AJAXRequest对象
var ajaxobj=new AJAXRequest;
AutoSaveMsg.innerHTML="正在恢复，请稍候……"
ajaxobj.url="inc/autosave.asp";
ajaxobj.content="action=restore";
ajaxobj.callback=function(xmlObj)
{
AutoSaveMsg.innerHTML="恢复最后保存成功";
// 如果内容为空则不改写textarea的内容
if(xmlObj.responseText!="")
{
// 恢复草稿
FormContent.value=xmlObj.responseText;
}
}
ajaxobj.send()
}

原理非常的简单就是当我们在设定的几秒之后就会自动把我们指定文本框中的数据保存起来，这个比上面那个更适用哦，当然上面只写了js部份php处理部份大家与其它的保存数据是一样的。


声明

源码下载不顺利，比如源码在百度网盘的有时会被无故取消等，请联系QQ：46667551
本站大部分下载资源收集于网络，但除特别说明之外，基本全部亲自测试可用！
但由于某些源码的更新迭代,比如微信小程序官方接口的变动等原因,
如时间过长,可能会造成本可以使用的代码出现问题,下载前请斟酌!
本站资源仅供学习和交流使用，版权归原作者所有，请在下载后24小时之内自觉删除。
若作商业用途，请购买正版，由于未及时购买和付费发生的侵权行为，使用者自行承担，概与本站无关。

原文链接：https://www.love0312.com/1066.html，转载请注明出处

上一篇:一种让超大banner图片不拉伸、全屏宽、居中显示的方法

下一篇:CSS中的浮动和清除浮动

猜你喜欢