textarea字数进行控制与显示

最新推荐文章于 2024-10-22 14:48:28 发布

MrBma

最新推荐文章于 2024-10-22 14:48:28 发布

阅读量314

点赞数

分类专栏： textview-html 文章标签： textarea 前端

本文链接：https://blog.youkuaiyun.com/qq_36765732/article/details/78497850

版权

textview-html 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在前端开发中实现textarea输入字数的控制和实时显示，提供了一种方便复用的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面是对textarea字数进行控制与显示方便以后直接调用

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .fontmany {
            position: absolute;
            right: 0px;
            bottom: 0px;
        }

        .beiz {
            width: 450px;
            height: 340px;
            position: relative;
        }
    </style>
</head>

<body>
    <div class="beiz">
        <textarea id="BZ" name="BZ" style="height: 340px; width: 450px" onkeydown="checkMaxInput(this,80)" onkeyup="checkMaxInput(this,80)" onfocus="checkMaxInput(this,80)" onblur="checkMaxInput(this,80);resetMaxmsg()"></textarea>
        <div class="fontmany">
            <span id="showlen">1</span>/<span id="maxlength">80</span>
        </div>
    </div>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        //多行文本输入框剩余字数计算  
        function checkMaxInput(obj, maxLen) {
            if(obj == null || obj == undefined || obj == "") {
                return;
            }
            if(maxLen == null || maxLen == undefined || maxLen == "") {
                maxLen = 100;
            }
            var $obj = $(obj);
            var newid = $obj.attr("id") + 'msg';

            if(obj.value.length > maxLen) { //如果输入的字数超过了限制  
                obj.value = obj.value.substring(0, maxLen); //就去掉多余的字  
                $('#showlen').text(obj.value.length);
            } else {
                $('#showlen').text(obj.value.length);
            }
        }
    </script>
</body>