css實現刷新頁面的同時保存頁面控件的輸入值

2024-07-11 09:00:58

字體：大中小

來源：轉載

供稿：網友

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></title>
<mce:style type="text/css"></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>

<div id="AutoSaveMsg"></div>
<input type="button" onclick="AutoSaveRestore();" value="恢復最后保存的草稿">

<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()
}