JS 输入框字数提示

先根据需求把样式写好

image.png

                        <div class="intro">
                            <div class="f_head">简介:</div>
                            <div>
                                <textarea name="intro" id="intro" cols="45" rows="6" style="resize:none" maxlength="50"></textarea>
                                <p class="number_hint">
                                    <span id="b">0</span>
                                    <span id="c">/50</span>
                                </p>
                                <p class="erro_s">简介内容5~50个字符之间</p>
                            </div>
                        </div>

      $("#intro").keyup(function() {
                    if (intro.value.length > 50) {
                        intro.value = intro.value.slice(0, 50);
                        $("#b").html("50");
                        $("#c").html("0");
                    } else {
                        $("#b").html(intro.value.length + "/");
                        $("#c").html(50 - parseInt($("#b").html()));
                    }
                });

在其他JS框架中就更简单了，有数据绑定

              <textarea id="message " rows="3 " [(ngModel)]="item.message " maxlength="150"
                (keyup)="checkTextarea(item.message)"></textarea>
              <span class="textarea__count">{{item.message?.length}}/150</span>