Home > GAE和编程 > js代码--限制文本字数

js代码--限制文本字数

September 16th, 2009 发表评论 阅读评论
<style type="text/css">
.progress{
 width: 1px;
 height: 14px;
 color: white;
 font-size: 12px;
    overflow:hidden;
 background-color: navy;
 padding-left: 5px;
}
</style>
<script type="text/JavaScript">
function textCounter(field,counter,maxlimit,linecounter) {
 // text width//
 var fieldWidth = parseInt(field.offsetWidth);
 var charcnt =field.value.length;       
 // trim the extra text
 if (charcnt > maxlimit) {
  field.value = field.value.substring(0,maxlimit);
 }
 else {
 // progress bar percentage
 var percentage = parseInt(100 - (( maxlimit -charcnt) * 100)/maxlimit) ;
 document.getElementById(counter).style.width= parseInt((fieldWidth*percentage)/100)+"px";
 document.getElementById(counter).innerHTML="已输:"+percentage+"%"
 // color correction on style from CCFFF-> CC0000
 setcolor(document.getElementById(counter),percentage,"background-color");
 }
}
function setcolor(obj,percentage,prop){
 obj.style[prop] ="rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}
</script>
<p>限制:120字节</P>
<form>
<textarea rows="5" cols="40" name="maxcharfield"id="maxcharfield"
onKeyDown="textCounter(this,'progressbar1',120)"
onKeyUp="textCounter(this,'progressbar1',120)"
onPaste="textCounter(this,'progressbar1',120)"
onFocus="textCounter(this,'progressbar1',120)"></textarea><br/>
<div id="progressbar1"class="progress"></div>
<script>textCounter(document.getElementById("maxcharfield"),"progressbar1",120)</script>
</form></font>
转载请以超链接注明来自  云在天边看世界
本文永久链接  http://www.tangblog.info/2009/09/16/js-text-limit-words.html

分类: GAE和编程 标签: ,

  1. 本文目前尚无任何评论,抢个沙发?
  1. 本文目前尚无任何 trackbacks 和 pingbacks.
/static/smilies/icon_twisted.gif /static/smilies/icon_smile.gif /static/smilies/icon_cry.gif /static/smilies/icon_question.gif /static/smilies/icon_razz.gif /static/smilies/icon_mrgreen.gif /static/smilies/icon_sad.gif /static/smilies/icon_evil.gif /static/smilies/icon_exclaim.gif /static/smilies/icon_redface.gif /static/smilies/icon_biggrin.gif /static/smilies/icon_surprised.gif /static/smilies/icon_eek.gif /static/smilies/icon_confused.gif /static/smilies/icon_cool.gif /static/smilies/icon_lol.gif /static/smilies/icon_mad.gif /static/smilies/icon_rolleyes.gif /static/smilies/icon_wink.gif /static/smilies/icon_idea.gif /static/smilies/icon_arrow.gif /static/smilies/icon_neutral.gif
capacha 请输入验证码(不区分大小写)