一个或者多个textarea输入的验证剩余的字数

最近做移动端的页面,遇到的内容骚味整理下,之前大部分时间,可以说几年,都没在网上整理。今个就随便扯下把。

大家可以参考下:

<!-- 一个textarea的验证剩余的字数 -->
        <div class="box" style="padding:10px;border:1px solid #ccc;">
            <textarea name="" id="shuru" style="border:none;display:block;width:100%;"></textarea>
            <div style="text-align:right;">
                <span id="shengyu">0</span>/50
            </div>
        </div>
        <script type="text/javascript">
            $("#shuru").on("input",function(){
                var num = 0;
                var len = $(this).val().length;
                if(len>50){
                    $("#shengyu").text(50);
                    $(this).val( $(this).val().substring(0,50));
                }else{
                    $("#shengyu").text(len);
                }
                // console.log($(this).val());
            })
        </script> 


         <!-- 多个textarea的验证剩余的字数 -->
        <div class="box" style="padding:10px;border:1px solid #ccc;">
            <textarea name="" id="shuru1" style="border:none;display:block;width:100%;"></textarea>
            <div style="text-align:right;">
                已输入<span id="shengyu1">0</span>/50
            </div>
        </div>
        <div class="box" style="padding:10px;border:1px solid #ccc;">
            <textarea name="" id="shuru2" style="border:none;display:block;width:100%;"></textarea>
            <div style="text-align:right;">
                已输入<span id="shengyu2">0</span>/100
            </div>
        </div>
        <div class="box" style="padding:10px;border:1px solid #ccc;">
            <textarea name="" id="shuru3" style="border:none;display:block;width:100%;"></textarea>
            <div style="text-align:right;">
                已输入<span id="shengyu3">0</span>/150
            </div>
        </div>


        <script type="text/javascript">
            function textareaLen(objId,oRemainId,numTxt){
                var obj = $("#" + objId);
                var oRemain = $("#" + oRemainId);          
                obj.on("input",function(){
                    var objLen = obj.val().length;
                     // var numTxtRel =  numTxt - objLen;//numTxtRel显示剩余输入的字数,代码要相应更改 ,这里是显示已输入的字数
                    if(objLen > numTxt){    
                        oRemain.text(numTxt);
                        obj.val(obj.val().substring(0,numTxt));
                    }else{  
                        oRemain.text(objLen);
                    }
                });
            };
            textareaLen('shuru1','shengyu1',50);
            textareaLen('shuru2','shengyu2',100);
            textareaLen('shuru3','shengyu3',150);
        </script>

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值