日期:2014-05-16 浏览次数:20607 次
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>