js 实现textarea输入字数提示

时间 2019-12-04

原文原文链接

1、先看效果图
javascript

效果如图，当输入文字的时候，提示区域动态的显示已输入的字数和最大输入的字数。很是经常使用的小功能。
2、知识点
知识点比较简单，为了兼容性好些，我多用了几个事件input、propertychange、paste、keyup。如今好多用vue等框架写，我暂时先用jQuery写了，缘由是读者比较好理解，须要其余方式也便于修改，高手估计也不用看这些东西啦哈哈哈。
3、上代码。
我当初学习的时候就但愿多看demo，可我找到的资料每每是讲一些要点，写一些代码片断，因此我尽可能的直接上代码了。html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-2.1.0.js"></script>
    </head>

    <body>
        <div id="div1">
            <textarea id="text" rows="8" cols="15"></textarea>
            <span></span>
        </div>
        <div id="viewBox">
            <!--这里是显示提示的区域-->
        </div>
        <script type="text/javascript">
            LimitedNnumber("#text", "#viewBox", 9)//调用函数须要传入三个参数，分别为，输入框、显示框、限制的长度（这里是9）

            function LimitedNnumber(eventBox, viewBox, textLength) {//调用函数须要传入三个参数，分别为，输入框、显示框、限制的长度
                $(document).on('input propertychange paste keyup', eventBox, function(event) {
                    this.value = this.value.replace(this.value.slice(textLength), "")//超出长度的部分替换为空
                    $(viewBox).html(this.value.length + "/" + textLength)
                })
            }
        </script>
    </body>

</html>