php實現input輸入框失去焦點自動儲存輸入框的資料_PHP教程

自動儲存常用於編輯器了，要實現資料定時儲存我們會使用到ajax功能，下面我們再一起來看一個input輸入框失去焦點自動儲存輸入框的資料執行個體

最近做一個輸入框失去焦點時自動儲存資料的功能，當然就是jQuery選取器選擇input，blur時，ajax提交資料給php檔案，php檔案儲存一下資料咯。主要是要注意一下中文的問題，所以中間需要轉一下編碼。

下面的執行個體是一個列表頁，有一點類似excel了。

html代碼：

代碼如下	複製代碼
{$id} {$description} 預覽編輯

js代碼：

代碼如下	複製代碼

php代碼：（引用了dedecms的函數、方法）

代碼如下	複製代碼
if($dopost==’ajaxSave’) { $value = urldecode(AutoCharset($value,”UTF-8″,”GB2312″)); //更新主表 $inQuery = “UPDATE `dede_archives` SET $field=’$value’ WHERE id=’$aid’”; if($dsql->ExecuteNoneQuery($inQuery)) { echo “true” ; exit; }else{ echo “false”; exit; } }

方法二，定時儲存草稿功能，防止資料意外丟失！

情況介紹，網站後台編輯器是採用了百度UEditor所見即所得 (WYSIWYG)編輯器，我們就是要實現自動定時儲存編輯器裡的內容。

編輯器的調用方式如下：

代碼如下	複製代碼

在發表頁面或編輯頁的最後加入js調用標籤：

代碼如下	複製代碼

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")); } }

可以增加停止儲存按鈕或立即恢複按鈕，如下：

代碼如下	複製代碼
停止儲存 立即恢複

好了，現在你的網站發表頁面/編輯頁面就具備自動儲存功能了。注意這種方式支援IE8及以上版本的IE，CHROME，Firefox等等大多數主流瀏覽器。至於IE6，實在是老掉牙了，不在考慮範圍內。如果一定要考慮IE6的，請使用上面提供的IE6/ie7相容方案。

http://www.bkjia.com/PHPjc/632717.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/632717.htmlTechArticle自動儲存常用於編輯器了，要實現資料定時儲存我們會使用到ajax功能，下面我們再一起來看一個input輸入框失去焦點自動儲存輸入框的資料...

