文本框限制输入字数-JS特效-爱易网页

文本框限制输入字数

日期：2014-05-18　浏览次数：20523 次

以下是程序代码

<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);
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 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");
 }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function setcolor(obj,percentage,prop){
 obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

站长特效提示您限制字数为：120字节

<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>

<div id="progressbar1" class="progress"></div>
<script>textCounter(document.getElementById("maxcharfield"),"progressbar1",120)</script>
</form>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

相关资料更多>

中国联通困局：遭遇OTT宽带4G三大难题

360涉足搜索范围百度市场份额面临应战

谷歌安卓全球副总裁为何跳槽中国企业小米？

韩国研制无线充电系统：一次可充40部手机

网友爆料称微软雇水军宣传主机Xbox One

任正非：华为决不上市上市公司股东贪婪而短视

蜗牛移动董事长石海：号卡被叫停属乌龙事件

可靠消息称微型针孔偷拍设备拟全面禁止

逆转猜想：如果阿里成为雅虎大股东会怎样？

香港云服务器免备案云主机VPS 国内独立IP 独享15M 月付SSD

推荐阅读更多>