Jquery 实现 WordPress 评论字数计数

万戈 2010.07.27 发布于：电脑网络 16,272 次践踏

不好意思各位访客朋友们，因为去了合肥几天，博客也就搁置了，回来也没有一一回复童鞋们的留言，赶紧埋头把手头上的工作解决掉，晚上又挤了一点时间折腾 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 相匹配，否则获取不到。

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

与

Jquery 实现 WordPress 评论字数计数

jQuery,WordPress,留言