javascript+cookie实现的文本输入记录
功能要求:有一个文本框,旁边有个button,点击按钮后将文本框输入的内容保存到cookie。在文本框得到焦点后,在下方显示这个文本框输入过的最近的五个词语。
示例源代码如下
<style> #dvPop{display:none;position:absolute;left:0px;top:20px;border:solid 1px #000000;background:#ffffff;width:200px;} </style> <div style="position:relative"> <input type="text" id="text" autocomplete="off" onfocus="showAuto()"/><input type="button" value="查询" onclick="save()"/> <div id="dvPop"></div> </div> <script> function setCookie(name,value){//保存cookie var d=new Date(); d.setFullYear(d.getFullYear()+1); document.cookie=name+"="+encodeURIComponent(value)+";path=/;expires="+d.toGMTString();} //获取cookie function getCookie(name){//读取cookie var m=new RegExp(name+'=([^;]+)','i').exec(document.cookie); if(m)return decodeURIComponent(m[1]); return ""; } var max=5;//定义要保存的最大记录数 function setText(dv){ document.getElementById('text').value=dv.innerHTML; dv.parentNode.style.display='none' } function showAuto(){ var history=getCookie('auto'),arr=[],s='',pop=document.getElementById('dvPop'); if(history!=''){ arr=history.split('|'); for(var i=0,j=arr.length;i<j;i++)s+='<div onclick="setText(this)">'+arr[i]+'</div>'; pop.innerHTML=s; pop.style.display='block'; } } function saveToCookie(v){ var history=getCookie('auto'),arr=[],count=1,i=0,s=v;//s为要保存到cookie的字符串,每项用|分隔开,最新输入的一项保存到第一个位置 if(history!='')arr=history.split('|'); for(var j=arr.length;i<j&&i<max;i++) if(arr[i]!=v){ s+='|'+arr[i]; count++; if(count>=max)break; } setCookie('auto',s); } function save(){ document.getElementById('dvPop').style.display='none' var t=document.getElementById('text') if(t.value!='')saveToCookie(t.value); t.value=''; } </script>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:javascript+cookie实现的文本输入记录