<textarea rows="4"  maxlength="50"  placeholder="请输入您的口味偏好(可不填)"></textarea>

 <div class="limitnum"><span class="word">0</span>/50字</div>

 

$("textarea").keyup(function(){        ---鼠标抬起事件

    var num=$(this).val().length;  ---获取输入的字数，注意textarea是通过val()来获取的。不是html啊啊啊

         if(num<=50){num=num;}   ---当字数小于50，数字不变

        else{$(this).val($(this).substr(0,50));num=50;}   --当字数大于50，截取前面50个字

        $(".word").html(num) ---把最后获取到的字数，显示出来
  });
   

 

使用element-ui 就可以使用show-word-limit。。这个功能在版本为2.8.2才有的。

maxlength 和 minlength 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 text 或 textarea 的输入框，在使用 maxlength 属性限制最大输入长度的同时，可通过设置 show-word-limit 属性来展示字数统计。

<el-input
  type="text"
  placeholder="请输入内容"
  v-model="text"
  maxlength="10"
  show-word-limit
>
</el-input>