微信小程序 - 文本框显示限制最大长度

wxml

 <view class='textarea-count'>
   <textarea placeholder='请输入文字' bindinput="getWords" maxlength='{{maxTextLen}}'></textarea>
   <view class='text-count-display f f-end'>{{textLen}}/{{maxTextLen}}</view>
 </view>

wxss

 /* @import "style.wxss"; */

 .f{
   display: flex;
 }

 .f-end{
   justify-content: flex-end;
 }

 .text-count-display{
   padding: 2%;
 }

 .textarea-count {
   border: 1px solid #ddd;
   border-radius: 5px;
 }

 .textarea-count textarea{
   width: 100%;
 }

js

 Page({

   /**
    * 页面的初始数据
    */
   data: {
     // 最大字符数
     maxTextLen: 20,
     // 默认长度
     textLen: 0
   },
   getWords(e) {
     let page = this;
     // 设置最大字符串长度(为-1时,则不限制)
     let maxTextLen = page.data.maxTextLen;
     // 文本长度
     let textLen = e.detail.value.length;

     page.setData({
       maxTextLen: maxTextLen,
       textLen: textLen
     });
   }
 })

easy.