php实现input输入框失去焦点自动保存输入框的数据
最近做一个输入框失去焦点时自动保存数据的功能,当然就是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 `detest_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")); } }可以增加停止保存按钮或立即恢复按钮,如下:
<a href= "javascript：void(0)" onclick= "javascript：stoplocs()" >停止保存</a> <a href= "javascript：void(0)" onclick= "javascript：showlocs()" >立即恢复</a>好了,现在你的网站发表页面/编辑页面就具备自动保存功能了,注意这种方式支持IE8及以上版本的IE,CHROME，Firefox等等大多数主流浏览器,至于IE6,实在是老掉牙了,不在考虑范围内,如果一定要考虑IE6的,请使用上面提供的IE6/ie7兼容方案.
查看更多关于php实现input输入框失去焦点自动保存输入框的数据的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did30155