php實現input輸入框失去焦點自動保存輸入框的數據

2024-05-04 21:47:57

字體：大中小

來源：轉載

供稿：網友

最近做一個輸入框失去焦點時自動保存數據的功能,當然就是jQuery選擇器選擇input,blur時,ajax提交數據給php文件,php文件保存一下數據,主要是要注意一下中文的問題,所以中間需要轉一下編碼.

下面的實例是一個列表頁,有一點類似excel了,html代碼如下:

<table width=”100%” align=”left” border=”0″ cellspacing=”0″ bgcolor=”#CCCCCC”>

<tr onmouseover=”this.className=’on’;” onmouseout=”this.className=”;” align=”center” id=”{$id}” bgcolor=”#FFFFFF”>

<td >{$id}</td>

<td ><input type=”text” id=”title_{$id}” value=”{$title}” onblur=”ajaxEdit(‘{$id}’,'title’);” ></td>

<td ><textarea id=”description_{$id}” rows=”4″ onblur=”ajaxEdit(‘{$id}’,'description’);” >{$description}</textarea></td>

<td ><a href=”view.php?aid={$id}” target=”_blank”>預覽</a><a href=”edit.php?aid={$id}”>編輯</a></td>

</tr>

</table>

js代碼如下:

<script type=”text/javascript”>

function Dd(i) {return document.getElementById(i);}

function ajaxEdit(aid,field){

var value = decodeURI(Dd(field+”_”+aid).value);

$.ajax({

type: “POST”,

url: “edit.php”,

data: {dopost:”ajaxSave”,aid:aid,field:field,value:value},

success: function(data){

if(data==”true”){//更新成功

Dd(field+”_”+aid).style.border=”#fff”;

}else{//更新失敗

alert(“更新失敗，可能是網速太慢”);

}

}

});

}

</script>

php代碼,引用了dedecms的函數、方法,代碼如下:

if($dopost==’ajaxSave’)

{

$value = urldecode(AutoCharset($value,”UTF-8″,”GB2312″));

//更新主表

$inQuery = “UPDATE `#@__archives` SET $field=’$value’ WHERE id=’$aid’”;

if($dsql->ExecuteNoneQuery($inQuery))

{

echo “true” ;

exit;

}else{

echo “false”;

exit;

}

}

方法二,定時保存草稿功能,防止數據意外丟失.

情況介紹,網站后臺編輯器是采用了百度UEditor所見即所得編輯器,我們就是要實現自動定時保存編輯器里的內容.

編輯器的調用方式如下:

<script type="text/plain" id="content" name="content" style="width:800px;height:400px;"></script>

<script type="text/javascript">

var editor = new UE.ui.Editor();

editor.render('content');

</script>

在發表頁面或編輯頁的最后加入js調用標簽:

<script type="text/javascript" src="localStorag.js"></script>

localStorag.js 的代碼如下:

/*注意: 本js腳本請在網頁源代碼最后的地方放置*/

if(!window.localStorage){

alert('您的瀏覽器不支持 localStorage 技術!');

}else{

var spanObj = document.getElementById('s1');

var saveTimer= setInterval(function(){

var str="";

if(document.all){/*IE*/ str=document.frames[1].document.body.innerHTML; }

else{/*Chrome,ff*/ str=document.getElementById("ueditor_0").contentDocument.body.innerHTML; }

if(str.length>20 && (str.indexOf("。")>-1 || str.indexOf("，")>-1)){ /*有內容才保存且有句號或逗號*/

localStorage.setItem("ctValue", str);

var d = new Date();

var YMDHMS = d.getFullYear() + "-" +(d.getMonth()+1) + "-" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();

spanObj.innerText='（數據保存于: '+YMDHMS+'）';

setTimeout(function(){ spanObj.innerText=''; },5000);

}

},25000); //每隔N秒保存一次

function stoplocs(){

clearInterval(saveTimer); //停止保存

//localStorage.removeItem("ctValue"); //清空

}

function showlocs(){

var html = localStorage.getItem("ctValue");

editor.setContent(html);

//alert(localStorage.getItem("ctValue"));

}

}