限制文本框，文本域输入的字符数量

最新推荐文章于 2020-11-02 11:19:39 发布

passer199101

最新推荐文章于 2020-11-02 11:19:39 发布

阅读量872

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u012307002/article/details/19288891

本文介绍了一种使用JavaScript实现的输入字符数量限制及实时显示剩余字符数的方法。通过两个核心函数`limitCharsNum`和`initLimitCharsNum`，可以有效地控制文本框输入的最大字符数，并实时更新剩余可用字符数。

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

function limitCharsNum(charsNumSpanId,id,max)
{ 
    setTimeout(function(){
       var valLen=$("#"+id).val().length;
       console.log(max);
       if(valLen>max)
       {
          console.log(valLen);
          $("#"+id).val($("#"+id).val().substring(0,max));
       }

       $("#"+charsNumSpanId).text((max-valLen)<=0?0:(max-valLen));
    }, 100);  
}

function initLimitCharsNum(charsNumSpanId,id,max)
{ 
     $("#"+id).attr("onpaste","limitCharsNum('"+charsNumSpanId+"','"+id+"',"+max+")");
     $("#"+id).attr("oncut","limitCharsNum('"+charsNumSpanId+"','"+id+"',"+max+")");
     $("#"+id).attr("onkeydown","limitCharsNum('"+charsNumSpanId+"','"+id+"',"+max+")");
     $("#"+id).attr("onkeyup","limitCharsNum('"+charsNumSpanId+"','"+id+"',"+max+")");
     $("#"+id).attr("ondrop","limitCharsNum('"+charsNumSpanId+"','"+id+"',"+max+")");
}

例子：

    initLimitCharsNum('remainderNum1','ztinput1',100);
    initLimitCharsNum('remainderNum2','fsnrtextarea1',100);