切换到宽版
发帖 回复
返回列表
  • 907阅读
  • 1回复

【主题美化&增强系列】评论框的简单计数器 [复制链接]

 上一主题 下一主题
blueandhack
WordPress侠客
 
只看楼主 倒序阅读 使用道具 0楼 发表于: 2010-10-10
— 本帖被 ralix 设置为精华(2010-10-17) —
效果如下



为什么会有这个功能？

因为WORDPRESS不限制留言字数，一旦一个页面的留言字数过多，比如有人恶意留言，达到上万字，你的页面用浏览器一打开，浏览器就会崩溃，所以此功能就是为了预防这种事的发生。


代码如下，贴到页面评论框以下部分位置（一般加在footer的js文件中就行，代码会自动运行）


复制代码
  2. <!-- 留言字数限制 开始 -->
  3. <script type="text/javascript">
  4. (function(){
  5.     var f=0,t=0;
  6.     var comform=document.getElementById("commentform")||0;
  7.     if(comform){
  8.         var combox=document.getElementById("comment");
  9.         var countbox=document.createElement("div");
  10.         countbox.innerHTML='You input <i id="counttext">0</i> characters.';
  11.         combox.parentNode.appendChild(countbox);
  12.         var counttext=document.getElementById("counttext");
  13.         with(counttext.style){
  14.             fontSize="35px";
  15.             color="#aaa";
  16.             //可在此追加样式控制,或在css中通过#counttext #countbox 定义相关样式
  17.         }
  18.         countbox.id="countbox";
  19.         comform.appendChild(countbox);
  20.         function count(){
  21.             counttext.innerHTML=combox.value.length;
  22.         //字数限制开始
  23.             if(combox.value.length>1000){        //这里是限制评论字数，超过限定字数会弹出提醒，并将计数器颜色设置为红色，将提交按钮设为不可用。需要的可以去掉注释
  24.                 document.getElementById("submit").disabled = true;
  25.                 counttext.style.color="#DD0000";
  26.                 if(!t){
  27.                     alert("You have input too many characters, please reduce something!");t=1;
  28.                     f=setInterval(count, 200);
  29.                 }
  30.             }else{
  31.                 document.getElementById("submit").disabled = false;
  32.                 counttext.style.color="#aaa";
  33.             }
  34.         //字数限制结束    
  35.         }
  36.         combox.onclick=function(){
  37.             f=setInterval(count, 200);
  38.         }
  39.         combox.onmouseout=function(){
  40.             if(f)clearInterval(f);//清除计时器
  41.         }
  42.     }
  43. })();
  44. </script>
  45. <!-- 留言字数限制 结束 -->


你并不需要改动你的comment.php模板，只需在css中通过


复制代码
  1. #counttext{
  2. color:#AAAAAA;
  3. font-family:Lucida,Arial,Helvetica,宋体,sans-serif;
  4. line-height:38px;
  6. }
  8. #countbox{
  9.     color:#AAAAAA;
  10.     float:right;
  11.     font-family:Lucida,Arial,Helvetica,宋体,sans-serif;
  12.     line-height:38px;
  13.     margin-right:40px;
  14.     margin-top:0;
  15.     padding:0;
  16. }
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
sunmengjing
WordPress新手
只看该作者 1楼 发表于: 04-03
嗯学习啦虽然一大堆的代码看不懂
回复
举报
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个