textarea 设置最长字数和显示剩余字数

HTML:

 <textarea id="FRB_Remark" class="form-control" maxlength="120" oninput="TextareaFontLength(this)" onchange="TextareaLimitLength(this)" onkeydown="TextareaLimitLength(this)" onkeyup="TextareaLimitLength(this)"style="height:100px;"></textarea>
                <div style="display: flex;right: 0; position: absolute;bottom: 5px;color: rgb(32 21 21 / 64%);">
                    <span id="span_Font_Length" style="font-size: 14px;">0</span>
                    <span style="font-size: 14px;">/</span>
                    <span style="font-size: 14px;">120</span>
                </div>

 

 

jq:

 //TextArea 实时显示字数
        function TextareaFontLength(data) {
            var strTeatArea = $("[id$='" + data.id + "']").val().length;
            $('#' + data.id).parent().find('div:eq(1)').find('span:eq(0)').text(strTeatArea);
           
        }

        function TextareaLimitLength(data) {
            data.value = data.value.substring(0, 120); 
            TextareaFontLength(data);
        }

 

 效果:

 

posted @ 2021-09-08 14:39  MakeGod  阅读(797)  评论(0)    收藏  举报