PHP は入力ボックスがフォーカスを失ったことを認識し、入力ボックスのデータを自動的に保存します

ホームページ

バックエンド開発

PHPチュートリアル

PHP は入力ボックスがフォーカスを失ったことを認識し、入力ボックスのデータを自動的に保存します_PHP チュートリアル

Jul 13, 2016 am 10:49 AM

input php 保存成し遂げるデータ集中の編集者自動欲しい入力

自動保存はエディターでよく使用されます。スケジュールされたデータ保存を実現するには、ajax 関数を使用します。

最近、入力ボックスを作成しました。フォーカスを失ったときにデータを自動的に保存する機能は、もちろん、jQuery セレクターが入力とブラーを選択すると、ajax がデータを php ファイルに送信し、php ファイルがデータを保存することです。重要なのは中国語の問題に注意することなので、途中でエンコードを変更する必要があります。

以下の例はリストページで、Excelに少し似ています。

htmlコード:

コードは次のとおりです

コードをコピー

<表の幅=”100%” align=”left” border=”0″ cellpacing=”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&gt ;</td>
<td ><a href=”view.php?aid={$id}” target=”_blank”>プレビュー</a><a href=”edit.php?aid={$id } ”>編集</a></td>
</tr>
</表>

jsコード:

コードは次のとおりですコードをコピー

関数 Dd(i) {return document.getElementById(i);}

phpコード：（dedecmsの関数とメソッドを参照）

コードは次のとおりですコードをコピー

方法 2: 偶発的なデータ損失を防ぐために、下書きを定期的に保存します。

はじめに、Web サイトのバックエンドエディターは Baidu UEditor WYSIWYG エディターを使用して、エディターにコンテンツを定期的に自動的に保存したいと考えています。

エディタは次のように呼び出されます:

if($dopost==’ajaxSave’)

{

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

//メインテーブルを更新します
$inQuery = “UPDATE `dede_archives` SET $field=’$value’ WHERE id=’$aid’”;
if($dsql->ExecuteNoneQuery($inQuery))
{
「true」をエコーします ;
終了します;
}その他{
エコー「偽」;
終了します;
}

}

コードは次のとおりです	コードをコピー
<script type="text/plain" id="content" name="content" style="width:800px;height:400px;"></script> <スクリプトタイプ="text/javascript"> var editor = 新しい UE.ui.Editor(); Editor.render('コンテンツ'); </スクリプト>

公開ページまたは編集ページの最後に js 呼び出しタグを追加します:

コードは次のとおりです	コードをコピー
<script type="text/javascript" src="localStorag.js"></script>

localStorag.jsのコードは次のとおりです:

コードは次のとおりです

コードをコピー

/*注: この js スクリプトを Web ページのソースコードの最後に配置してください*/
if(!window.localStorage){
alert('お使いのブラウザは localStorage テクノロジをサポートしていません!');
}その他{

varspanObj = 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 = 新しい日付();
var YMDHMS = d.getFull Year() + "-" +(d.getMonth()+1) + "-" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes( ) + ":" + d.getSeconds();
spanObj.innerText='(データの保存場所: '+YMDHMS+')';
setTimeout(function(){spanObj.innerText=''; },5000);
}
},25000); //N 秒ごとに保存します

関数 stoplocs(){
clearInterval(saveTimer); //保存を停止します
//localStorage.removeItem("ctValue"); //クリア
}

関数 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>

これで、Web サイトの公開ページ/編集ページに自動保存機能が追加されました。この方法は、IE、CHROME、Firefox、およびその他のほとんどの主流ブラウザの IE8 以降のバージョンをサポートしていることに注意してください。 IE6 に関しては、本当に古いので考慮されていません。 IE6 を検討する必要がある場合は、上記で提供されている IE6/ie7 互換性ソリューションを使用してください。

。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。