肥宅之家  ⁝︎  登录
构造一个即时保存的编辑器
最近在写博客编辑器,希望做到文本框随时输入,随时保持这种效果。
如果用JS监测每输入一个字就保存一次,那样读写数据库过于频繁。
用30秒定时保存的话,不能确保即时性和可靠性。
于是查阅网上资料后,确定了如下方案:
function save(){
if(!presave){return;};presave=false;
//后面是提交数据到后台的代码
};
var pretext=document.getElementById(\'text\'),presave=false;
pretext.addEventListener(\'input\',function(){presave=true;});
pretext.addEventListener(\'blur\',function(){ttext();});
pretext.addEventListener(\'change\',function(){ttext();});
pretext.addEventListener(\'mouseout\',function(){ttext();});
window.setInterval(function(){ttext();},30000);
window.addEventListener(\'beforeunload\',function(e){if(presave){ttext();var ask=\'退出编辑?\';(e || window.event).returnValue=ask;return ask;}});
presave项是为了在文本没有修改时,不进行保存,从而减少读写。
剩下的几个监听项,
input:启用预提交。
blur:文本失焦保存。
change:文本变更时保存。
mouseout:鼠标移出保存。
beforeunload:页面退出保存。询问退出编辑是为了在关闭时有充足缓冲时间,避免直接关闭造成代码无法执行。
C
应用中心 脑浆物语 霖博客 Jet 设计笔记 依萌萌 灰常记忆 乐亦人生 拔剑舞 云破天开 秋日 Yoooo 幻焕 月宅酱 空城 笨猫