评论框的简单计数器（无需改动模板，附带输入字数限制功能）
21:11 | Categories: Program
来过我博客的都知道，我博客很早在评论框右下角就有个小小的计数器，可以显示你在评论框中输入的字数。这个功能很简单，配合模板，其实一两句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代码又需要稍微改动了。
声明: 本站遵循 署名-非商业性使用 3.0 共享协议. 转载请注明转自 I’m qiqiboy !
Post url: http://qiqi.boy.im/1g. You can ReTweet This Post.
27 Responses to this post.
Comments (24) Trackbacks (3)[...] 评论框的简单计数器（无需改动模板，附带输入字数限制功能）》等文章。希望到北京后还有时间继续更新博客。 声明: 本站遵循 [...]
[...] 评论框的简单计数器（无需改动模板，附带输入字数限制功能） [...]
[...] 在我的评论框右侧有一个计算字数的评论框，其实对于我还是挺喜欢的，因为一方面可以统计自己的评论字数，一方面也可以装饰一下评论栏，然后碰巧我在QIQIBOY的博客上看到《评论框的简单计数器（无需改动模板，附带输入字数限制功能）》这篇文章，于是我就照着里面的instruction把它添加到自己的博客上，效果感觉如下图 [...]