进度条式限制文本框输入字节

最新推荐文章于 2025-04-24 10:22:35 发布

HelloWorldww

最新推荐文章于 2025-04-24 10:22:35 发布

阅读量482

点赞数

文章标签： textbox function server asp class div

本文链接：https://blog.youkuaiyun.com/HelloWorldww/article/details/7376448

版权

本文介绍了一个用于限制文本输入长度并显示进度的网页组件，通过CSS和JavaScript实现文字输入时的实时反馈，帮助用户了解剩余可用字符数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

</style>

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 style="font-size:small; color: #999999;">
     限制：100字节</p>
    <asp:TextBox ID="maxcharfield" runat="server" TextMode="MultiLine" Width="900px"
     Height="80px" οnkeydοwn="textCounter(this,'progressbar1',100)" οnkeyup="textCounter(this,'progressbar1',100)"
    οnpaste="textCounter(this,'progressbar1',100)" οnfοcus="textCounter(this,'progressbar1',100)"></asp:TextBox>
                            <br />
    <div id="progressbar1" class="progress">
    </div>
    <script type="text/javascript">textCounter(document.getElementById("maxcharfield"),"progressbar1",100)</script>
    //<script src="../JS/JsMaxLength.js" type="text/javascript"></script>