The CSS implementation refreshes the page while saving the page control's input values

Source: Internet
Author: User
Tags empty

CSS implementation refresh the page while saving the input value of the page control this is very useful for us, such as some pages accidentally refreshed page form value is lost need to re-enter the very trouble, then we can use CSS to define the page refresh value saved, specific settings are as follows.

   

Add <meta name= "save" content= "history" to the head >

Add Css:input{behavior:url (#default #savehistory)};

e.g. <input type=text id= "Txttestsavehistory" exists on the page/>

Refresh the page after entering the value of input, the value is still

Example

  code is as follows &nbs P;

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta name=" Save "content=" History "
<title></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>
<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>
&lT;/ul>
</div>

There is also a real way to achieve is JS Ajax Save draft features

The first is the form page:

The code is as follows

<!--text field--> for writing articles
<textarea cols= "Ten" rows= "6" id= "Content" ></textarea>
<!--autosavemsg display return information-->
<div id= "Autosavemsg" ></div>
<input type= "button" onclick= "Autosaverestore ()" value= "Restore Last saved draft" >

<!--Place the JS code behind all objects to prevent errors that do not exist when the page is not loaded-->
<!--Ajax class-->
<script type= "Text/javascript" src= "Ajaxrequest.js" ></script>
<!--automatically save code-->
<script type= "Text/javascript" src= "Autosave.js" ></script>

===== the following code to save as autosave.js=====

  code is as follows &nbs P;

///Content object to be saved Formcontent
var Formcontent=document.getelementbyid ("Content");
//Displays the object that returns information
Var Autosavemsg=document.getelementbyid ("Autosavemsg");
//AutoSave interval
var autosavetime= 60000;
//Timer object
var autosavetimer
///Set first automatic save state
Setautosave (),
//Auto Save functions
Function AutoSave ()   {
//If the content is empty, do not process it and return directly to
if (! Formcontent.value) return;
//Create Ajaxrequest object,
var ajaxobj=new ajaxrequest;
ajaxobj.url= "inc/autosave.asp";
ajaxobj.content= " Postcontent= "+escape (Formcontent.value);
Ajaxobj.callback=function (xmlobj)  
{
///show Feedback
Autosavemsg.innerhtml=xmlobj.responsetext;
}
Ajaxobj.send ();
}


//Set auto save state functions
Function Setautosave ()  
{
Autosavetimer=setinterval ("AutoSave ()", Autosavetime);

//Restore the last saved draft
Function Autosaverestore ()
{
///Create Ajaxrequest object
var ajaxobj=new ajaxrequest;
Autosavemsg.innerhtml= "is recovering, please wait ..."
ajaxobj.url= "inc/autosave.asp";
ajaxobj.content= "Action=restore";
Ajaxobj.callback=function (xmlobj)
{
autosavemsg.innerhtml= "restore last Save succeeded";
//If content is empty, textarea content is not overwritten
if ( Xmlobj.responsetext!= "")
{
//restore draft
Formcontent.value=xmlobj.responsetext;
}
}
Ajaxobj.send ()
}

The

Principle is very simple is that when we set a few seconds will automatically save the data in our designated text box, which is more applicable than the above, oh, of course, the above only write JS part of the PHP processing part of you and other save data is the same.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.