限制文本框字数

最新推荐文章于 2024-08-07 11:59:22 发布

百羽

最新推荐文章于 2024-08-07 11:59:22 发布

阅读量2.3k

点赞数

分类专栏：前端文章标签： layui html js

本文链接：https://blog.csdn.net/royraohr/article/details/122704325

版权

前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

实现文本框字数统计
在这里插入图片描述
html

<div class="layui-input-inline">
                    <textarea class="layui-textarea" id="reason" name="reason" v-model="reason" maxlength="200" onkeyup="setLength(this,200,'wordsLength');"
                              style="width:380px;margin-top:7px;height:75px;max-height:400px;overflow-x:auto;line-height:24px;"
                              rows="3" ></textarea>
                <span id="wordsLength" style="position:absolute; right:-188px; bottom:-3vh;font-size:13px; color:#BDCADA">0/200</span>
</div>

<script>
    // 限制文本框字数
    function setLength(obj,maxlength,id){
        var num=maxlength-obj.value.length;//获取文本框输入内容的长度
        var leng=id;//获取右下角显示的id
        if(num<0){
            num=0;//如果文本框文字小于零则让它显示为零
        }
        document.getElementById(leng).innerHTML=num+"/200";
        //通过id获取到span标签在页面上的显示并对它的值进行拼接,就是把计算出来的结果+最大限制字数
    }
</script>