来过我博客的都知道,我博客很早在评论框右下角就有个小小的计数器,可以显示你在评论框中输入的字数。这个功能很简单,配合模板,其实一两句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代码又需要稍微改动了。

