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

来源:互联网 发布:好听的网络歌曲 推荐 编辑:程序博客网 时间:2024/06/08 19:23

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

大家可以参考下:

<!-- 一个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>

原创粉丝点击