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

文本框限制输入字数

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

以下是程序代码

<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 全部选择提示：你可先修改部分代码，再按运行]

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

相关资料更多>

微软大幅调整Bing在华策略：从高大上到接地气

让一让，小米4来了，碰见米粉请务必绕道走！

中移动本月推手机钱包 iPhone遭边缘化

携程整合去哪儿陷入僵局欲联手老对手艺龙

亚马逊Fire Phone：请别拿我跟苹果三星比

杨元庆去年总薪酬1.33亿元

QQ空间与微信龟兔赛跑，商业生态链陷入死循环

传苹果与雅虎协作信息提供进一步摆脱谷歌

马斯克的特斯拉能否保持好势头

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

推荐阅读更多>