<styletype="text/css">
.progress{
width:1px;
height:14px;
color:white;
font-size:12px;
overflow:hidden;
background-color:navy;
padding-left:5px;
}
</style>
<scripttype="text/JavaScript">
functiontextCounter(field,counter,maxlimit,linecounter){
//textwidth//
varfieldWidth=parseInt(field.offsetWidth);
varcharcnt=field.value.length;
//trimtheextratext
if(charcnt>maxlimit){
field.value=field.value.substring(0,maxlimit);
}
else{
//progressbarpercentage
varpercentage=parseInt(100-((maxlimit-charcnt)*100)/maxlimit);
document.getElementById(counter).style.width=parseInt((fieldWidth*percentage)/100)+"px";
document.getElementById(counter).innerHTML="已输:"+percentage+"%"
//colorcorrectiononstylefromCCFFF->CC0000
setcolor(document.getElementById(counter),percentage,"background-color");
}
}
functionsetcolor(obj,percentage,prop){
obj.style[prop]="rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}
</script>
<p>限制:120字节</P>
<form>
<textarearows="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/>
<divid="progressbar1"class="progress"></div>
<script>textCounter(document.getElementById("maxcharfield"),"progressbar1",120)</script>
</form>
分享到:
相关推荐
这是一款美观又实用的HTML5文本框输入字数限制提示特效,当input文本框文字超过限制字符时,输入框抖动动画提示,并不可再输入更多文字。
jQuery textarea文本框输入文字字数限制提示代码,设置固定输入字符,实时计算显示已经输入多少字符。
原生js text文本框输入字数限制长度提示
html限制文本框输入小数点 数字 字母 汉字 等
js限制文本框只输入正整数 js限制文本框只输入正整数
javasxript的常用文本框的输入限制代码 有正则,有keyup,也有粘贴限制
C#限制文本框输入数字,各种方法.
C#限制文本框只允许输入数字类型,比如在本实例中,当你输入除了数字以外的字符类型时,便会弹出一个文本提示框,告诉您这个输入框内不允许输入其它类型的字符,在C#编程中,是比较常见且实用的小特效,欢迎新手...
限2位小数:任意数字:大写英文:小写英文:日 期: 任意中文:部分英文:范围: a,b,c,d,e: 部分中文:范围: 一二三四五六七八九十
有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!
vb2005限制文本框输入内容,防止输入其他字符,规范输入格式
JSP限制文本框输入条件,比如只能输入数字,字符. 不能输入中文等.
用js监控文本框的输入字数。 可实时的显示还可以输入多少字
js代码 [removed] //显示限制输入字符method function textAreaChange(obj){ ... var count_total = $this...jQuery textarea文本框输入文字字数限制提示代码,设置固定输入字符,实时计算显示已经输入多少字符。
1.文本框只能输入数字代码(小数点也不能输入) 2.只能输入数字,能输小数点. 4.只能输入字母和汉字 等等
JS与Jquery之文本框输入并同步输出显示 JS与Jquery之文本框输入并同步输出显示
jQuery计算文本框可输入字数代码基于jquery-2.2.3.min.js制作,动态计算文本框可输入字数统计。
字数输入限制按百分比例显示代码,让你的代码更加美观。
文本框输入限制 正则表达式 直接粘贴复制就能用