JQuery的扩展函数,很强悍:
http://pure-essence.net/stuff/webTips/dodosTextCounter/index.html
?
?
普通情况,即新建页面:
?
?
<p> <label for="phone">*Message:</label> <textarea class="textfield" id="comments" name="comments" rows="8" cols="35"></textarea> <div style="padding-left:300px"><span id="counter">2048 characters left</span><br/></div> </p>
?
?
<script language="javascript"> <!-- document.getElementById("comments").value = ""; var ppl=70 var maxl=2048 document.onkeydown=function(){ var s=document.getElementById("comments").value.length +1; if(s>maxl)document.getElementById("comments").value=document.getElementById("comments").value.substr(0,maxl-1) else document.getElementById("counter").innerHTML=(maxl-s)+" characters left" } function cha(){ var txt=document.getElementById("comments").value,tl=txt.length; var txtArray=[],k=(tl/ppl<=1)?1:Math.ceil(tl/ppl); for (var i=0;i<k;i++){ txtArray[i]=txt.substr(i*ppl,ppl); alert(txtArray[i]) ; } document.getElementById("comments").value="" document.getElementById("counter").innerHTML="" } //--> </script>
?
特殊情况,即在编辑页面,文本框同时需要显示文字。所以在JavaScript代码开始部分必须考虑到这个情况:
?
?
<dl class="description"> <dt><label for="email">Description</label></dt> <dd><textarea id="description" name="description" cols="67" rows="4"><?= $biz->description ?></textarea> </dd> </dl> <dl class="char_limit"> <dt id="counter">10240 characters left</dt> </dl>?
<script language="javascript"> <!-- var ppl=70; var maxl=10240; var s=document.getElementById("description").value.length +1; document.getElementById("counter").innerHTML=(maxl-s)+" characters left"; document.onkeydown=function(){ var s=document.getElementById("description").value.length +1; if(s>maxl)document.getElementById("description").value=document.getElementById("description").value.substr(0,maxl-1) else document.getElementById("counter").innerHTML=(maxl-s)+" characters left" } function cha(){ var txt=document.getElementById("description").value,tl=txt.length; var txtArray=[],k=(tl/ppl<=1)?1:Math.ceil(tl/ppl); for (var i=0;i<k;i++){ txtArray[i]=txt.substr(i*ppl,ppl); alert(txtArray[i]) ; } document.getElementById("description").value=""; document.getElementById("counter").innerHTML=""; } //--> </script>