七月
14

评论框的简单计数器(无需改动模板,附带输入字数限制功能)

来过我博客的都知道,我博客很早在评论框右下角就有个小小的计数器,可以显示你在评论框中输入的字数。这个功能很简单,配合模板,其实一两句js代码就能搞定。偶尔有人向我问起这个小功能,我也没怎么正面回答过,因为我并不觉得这个功能有什么用处。今天突然想到可以配合添加一个评论字数限制的功能,于是简单完善了一下,感觉还行。

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

//评论框计数器
(function(){
    var f=0,t=0;
    var comform=document.getElementById("commentform")||0;
    if(comform){
        var combox=document.getElementById("comment");
        var countbox=document.createElement("div");
        countbox.innerHTML='You input <i id="counttext">0</i> characters.';
        combox.parentNode.appendChild(countbox);
        var counttext=document.getElementById("counttext");
        with(counttext.style){
            fontSize="35px";
            color="#aaa";
            //可在此追加样式控制,或在css中通过#counttext #countbox 定义相关样式
        }
        countbox.id="countbox";
        comform.appendChild(countbox);
        function count(){
            counttext.innerHTML=combox.value.length;
        /*    if(combox.value.length>1000){        //这里是限制评论字数,超过限定字数会弹出提醒,并将计数器颜色设置为红色,将提交按钮设为不可用。需要的可以去掉注释
                document.getElementById("submit").disabled = true;
                counttext.style.color="#DD0000";
                if(!t){
                    alert("You have input too many characters, please reduce something!");t=1;
                    f=setInterval(count, 200);
                }
            }else{
                document.getElementById("submit").disabled = false;
                counttext.style.color="#aaa";
            }
        */    
        }
        combox.onclick=function(){
            f=setInterval(count, 200);
        }
        combox.onmouseout=function(){
            if(f)clearInterval(f);//清除计时器
        }
    }
})();


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

#counttext{
 
}
 
#countbox{
 
}

追加样式控制。

如果要加在页面其它地方,则js代码又需要稍微改动了。

计数器

本文标签: , , , ,

分享

本文短网址: http://qiqi.boy.im/1g

这篇文章已经有 36 条评论

Comments (29) Trackbacks (7)
You can leave a response or Trackback this entry .
  1. winy -#1

    我用的达到限制了就变成max xxx字符,这个提示不错

  2. A.shun -#2

    效果很赞 :lol:
    这段js也不大,可以有

  3. 阿邙 -#3

    有评论字数限制的确好一些 省得有人恶意破坏

  4. 丕子 -#4

    呵呵 今天刚注意了这个小功能 发现好多编辑器有 因为今天选择编辑器了就注意了一下 正好你这里给出来了 太巧了

  5. Dianso -#5

    哈哈,发出来方法了,这就去折腾

  6. 万戈 -#6

    赶紧试试去!

  7. zwwooooo -#7

    这样感觉是用twitter,哈

    • QiQiBoY --#1

      @zwwooooo
      twitter的字数是倒减的。。不过我们也可以弄成倒减的。。从1000开始。。哈哈

  8. 小邪 -#8

    强力收藏 ~ (¯﹃¯)口水

  9. Bee君 -#9

    呵呵,马上收藏~
    不够可能应用到别人模板 div id 有改动

  10. Fanr -#10

    :grin: 总算用到了一点C的只是…..把counttext.innerHTML=combox.value.length;改成counttext.innerHTML=1000-combox.value.length;顺利解决字数倒减。哈哈~~~

  11. Fanr -#11

    啊,把知识写成只是了,白字啊白字~~

  12. marcusyong -#12

    我爱你,哈哈哈,哈哈

  13. blueandhack -#13

    请问~这个计数器在我的博客似乎出现了问题
    当点击回复之后
    他仍然显示为0
    只有点击一次输入框,才会显示字数
    请问如何解决~

  14. heson -#14

    嘿嘿抄袭了““你的浮云也不错啊 哈哈

  15. DH -#15

    你现在的评论中没有设置这个吧?

  16. sprityaoyao -#16

    代码收藏了,多谢分享

  1. 添加引用按钮——轻松打造属于你的WordPress引用回复功能

    [...] 评论框的简单计数器(无需改动模板,附带输入字数限制功能)》等文章。希望到北京后还有时间继续更新博客。 声明: 本站遵循 [...]

  2. 博客加入若干Ajax效果

    [...] 评论框的简单计数器(无需改动模板,附带输入字数限制功能) [...]

  3. wordpress评论框字数计数

    [...] 在我的评论框右侧有一个计算字数的评论框,其实对于我还是挺喜欢的,因为一方面可以统计自己的评论字数,一方面也可以装饰一下评论栏,然后碰巧我在QIQIBOY的博客上看到《评论框的简单计数器(无需改动模板,附带输入字数限制功能)》这篇文章,于是我就照着里面的instruction把它添加到自己的博客上,效果感觉如下图 [...]

  4. 评论框计数并限制字数

    [...] 此代码是从qiqiboy那弄来的“““`放出代码咯 //评论框计数器 (function(){ var f=0,t=0; var [...]

  5. 评论框计数并限制字数

    [...] 此代码是从qiqiboy那弄来的“““`放出代码咯 //评论框计数器 (function(){ var f=0,t=0; var [...]

  6. wordpress评论字数限制 – 闲云野鹤夫妻博客

    [...] 相关的解决办法,qiqiboy有他的方法,想看他的方法,请走这里! [...]

  7. jQuery 评论字数即时统计

    [...] 评论计数之前流行过一段时间,那时一是感觉没啥用,二是要加的代码挺多的。主流也是2种方法,元素JavaScript的(这儿),jQuery的(这儿)。 [...]

Leave a Reply

Hi , say something.

  • :?:
  • :razz:
  • :sad:
  • :evil:
  • :!:
  • :smile:
  • :oops:
  • :grin:
  • :eek:
  • :shock:
  • :???:
  • :cool:
  • :lol:
  • :mad:
  • :twisted:
  • :roll:
  • :wink:
  • :idea:
  • :arrow:
  • :neutral:
  • :cry:
  • :mrgreen: