Jquery 实现 WordPress 评论字数计数

发布于：电脑网络 5,899 次践踏

不好意思各位访客朋友们，因为去了合肥几天，博客也就搁置了，回来也没有一一回复童鞋们的留言，赶紧埋头把手头上的工作解决掉，晚上又挤了一点时间折腾 WordPress，拳不离手，曲不离口，一天不折腾 WordPress，手就痒痒，三天没碰代码，都感觉有点生疏了，差点找不到折腾的目标。

今天折腾的 WordPress 目标是实现留言字数的实时计数功能。因为看到之前 qiqiboy 写过一篇文章介绍了，不过 qiqiboy 是自己写的 Javascript 脚本，虽然很简单，不过我还是嫌代码多，就一直没加上，今天折腾了一种 Jquery 实现的 WordPress 对评论字数进行实时统计计数的功能。因为比较仓促，就只在留言板页面加上了这个效果，有兴趣的朋友可以先去留言板看看效果。样式也没有怎么修整过，比较粗糙，多多包涵啦～

接下来说方法：

1、加载 Jquery

这个是必须的，可以用  Google 托管的，也可以下载到本地服务器调用，Jquery 1.2X 的版本就够用了。

2、Jquery 的执行脚本

<script type="text/javascript" >
$(function(){
    var $comment = $('#comment');
    var $str  =  $('#str');
    var time;
    $comment.focus(function(){
        time = window.setInterval( substring,100 );
    });   
    function substring() {
        var val = $comment.val();
        var length = val.length;
        if( $str.html() != (length) ){
            if(length==0){
                $("#wordcount")[0].firstChild.nodeValue = "您已输入0";
                $str.html(length);
            }else{
                $("#wordcount")[0].firstChild.nodeValue = "您已输入";
                $str.html(length);
            }
        }
    }
});
</script>

是不是看起来更精简一些呢？这个一定要放在 Jquery 的后面，代码的顺序问题。

3、HTML 部分

<p id="wordcount">
    您已输入<span id="str">0</span>字
</p>

这部分代码就是要 wordcount 和 str 这两个 id 和第二步中的相匹配，包括第二步中的 #comment 也要和评论框的 id 相匹配，否则获取不到。 

好了，就写到这里吧，也不多写了，重点都说到了，接下去就看各位的悟性了，哈哈～