小程序textarea字数限制

• WXML

  <view class="text_area">
      <textarea  minlength="{{min_text}}" maxlength="{{max_text}}" 
      bindinput="textarea_limit">
        <text class="current-word-number"><text class="min-text">{{min_text|0}} 
        </text>/{{max_text}}</text>
      </textarea>
   </view>

• JS

Page({
  data: {
    min_text: 0,
    max_text: 20,
  },

  textarea_limit: function (e) {
    var value = e.detail.value;
    var len = parseInt(value.length);
    if (len > this.data.max_text) 
    {return;} 
    this.setData({
      min_text: len
    });
    if (this.data.min_text == 100) {
      wx.showModal({
        title: '提示',
        content: '您输入的字数已达上限',
      })
    }
  },
})

• WXSS

.text_area {
  width: 100%;
  min-height: 515rpx;
  border-radius: 8rpx;
  margin: 0 auto;
  position: relative;
}
.text_area >textarea {
  width: 100%;
  min-height: 515rpx;
}
.current-word-number {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #44537B;
}
.current-word-number .min-text{
  color: #3ACB96;
}

//如果事件无效，请检查开发者工具版本是否过高，可以尝试用相对成熟的开发版本