PHP realizes that the input box loses focus and automatically saves the data of the input box

Home

Backend Development

PHP Tutorial

PHP realizes that the input box loses focus and automatically saves the data of the input box_PHP tutorial

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 13, 2016 am 10:49 AM

inputphpkeepaccomplishdatafocusofeditorautomaticwantenter

Auto-save is often used in editors. To achieve scheduled data saving, we will use the ajax function. Let’s look at an example of an input box losing focus and automatically saving data in the input box.

I recently made an input box. The function of automatically saving data when losing focus is of course the jQuery selector selecting input and blur. Ajax submits the data to the php file, and the php file saves the data. The main thing is to pay attention to the Chinese problem, so the encoding needs to be changed in the middle.

The example below is a list page, a bit similar to excel.

html code:

The code is as follows

Copy code

代码如下

复制代码

{$id}

预览编辑

{$id}

> ;

Preview Edit

js code:

代码如下

复制代码

The code is as follows

Copy code

代码如下

复制代码

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

}

php code: (referring to functions and methods of dedecms)

The code is as follows	Copy code
if($dopost==’ajaxSave’) { $value = urldecode(AutoCharset($value,”UTF-8″,”GB2312″)); //Update main table $inQuery = “UPDATE `dede_archives` SET $field=’$value’ WHERE id=’$aid’”; if($dsql->ExecuteNoneQuery($inQuery)) { echo “true” ; exit; }else{ echo “false”; exit; } }

Method 2: Save drafts regularly to prevent accidental data loss!

Introduction, the website background editor uses Baidu UEditor WYSIWYG editor. We want to automatically save the content in the editor regularly.

The editor is called as follows:

The code is as follows

代码如下	复制代码

Copy code

代码如下	复制代码

代码如下

复制代码

/*注意: 本js脚本请在网页源代码最后的地方放置*/
if(!window.localStorage){
alert('您的浏览器不支持 localStorage 技术!');
}else{

function stoplocs(){
clearInterval(saveTimer); //停止保存
//localStorage.removeItem("ctValue"); //清空
}

function showlocs(){
var html = localStorage.getItem("ctValue");
editor.setContent(html);
//alert(localStorage.getItem("ctValue"));
}

}

Add the js call tag at the end of the publishing page or editing page:

代码如下	复制代码
停止保存立即恢复

The code is as follows	Copy code

The code of localStorag.js is as follows:

The code is as follows

Copy code

/*Note: Please place this js script at the end of the web page source code*/
if(!window.localStorage){
alert('Your browser does not support localStorage technology!');
}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)){ /*Save only if there is content and there is a period or comma* /
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='(data saved in: '+YMDHMS+')';
setTimeout(function(){ spanObj.innerText=''; },5000);
}
},25000); //Save every N seconds function stoplocs(){
clearInterval(saveTimer); //Stop saving
//localStorage.removeItem("ctValue"); //Clear
} function showlocs(){
var html = localStorage.getItem("ctValue");
editor.setContent(html);
//alert(localStorage.getItem("ctValue"));
} } You can add a stop saving button or an immediate resume button, as follows:

The code is as follows

Copy code

Stop saving
Restore now Okay, now your website publishing page/editing page has the auto-save function. Note that this method supports IE8 and above versions of IE, CHROME, Firefox and most other mainstream browsers. As for IE6, it is really outdated and is not considered. If you must consider IE6, please use the IE6/ie7 compatibility solution provided above.

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn