js 校验输入框还可以输入多少个字

html代码:
<textarea class="textarea" maxlength="100" placeholder=" 最多输入100个字!"></textarea>
<div>输入剩余<span class="num">100</span>字。</div>
复制代码
js代码:
//residualFigure函数校验输入框还可以输入多少字
//txt为要限制输入内容的容器,residue为显示剩余数字的容器,max为最大输入数字限制
function residualFigure(txt, residue, max){
    $(txt).on("keyup",function(){
        var content = $(txt).val().replace(/\s/g,''),//获取输入内容容器中的值
            len = content.length,//获取输入容器中值的长度
            residual_number = max - len;//最大输入限制的数值-获取输入容器中值的长度,得到改变剩余数字的值
        if(residual_number < 0){
            residual_number = 0;//防止剩余数字的值出现负数情况
        }
        //判断 若输入框里的内容长度大于给定限制的数值,则只保留给定限制的数值长度的内容
        if(len > max){
            $(txt).val(content.substring(0,max));
        }
        //更改剩余数字数值
        $(residue).text(residual_number);
    });
}
复制代码
//调用residualFigure函数
residualFigure(".textarea",".num",100);
复制代码


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值