微信小程序中textarea表单组件字数实时更新方法

**序言：**该文章实现的是在小程序中，textarea文本框输入文字后，实时显示文字的字数 ，同时设置到规定字数则停止增加字数，获取更好的用户输入体验以及提示。

1.wxml 代码

 <textarea class="xinyuan-input" bindinput="bindKeyInput"  maxlength="{{textAreaMaxLen}}" value="{{inputValue}}"   placeholder="请输入您的内容......"  placeholder-class="c-palceholder"  style="height: 8em" />
  <image    class="xieicon-btn" src="/image/xieicon.png"></image>
  <view  class="back-btn-jishu">{{inputValueLength}}/{{textAreaMaxLen}}  </view>

2.wxss 代码

.xinyuan-input{
  margin-top: -26%;
  width: 70%;
  padding: 10px 0px;
  background:rgb(78, 55, 225);
 
  background-size: 100% 100%;
 
  box-shadow: 0 0 15px 2px #5547e6, 0px 0px 10px 1px #7b78c9 inset;
 
  border-radius: 10px;
  color: rgb(248, 246, 246);
  padding-left: 35px;
  padding-right: 20px;
}

.c-palceholder{
  color: rgb(218, 212, 212);
  font-size: 14px;
  /* padding-top: 6px; */
}


.xieicon-btn{
  position: absolute;
  left: 5%;
  top: -60%;
  width: 15px;
  height: 15px;

}

.back-btn-jishu{
  position: absolute;
  left: 65%;
  top: 65%;
  /* background-color: rgba(6, 34, 11, 0.479); */
  color: rgb(240, 233, 233);
  width: 20%;
  height: 30%;
  text-align: center;
  z-index: 10;
}

3.js 代码

Page({
  /**
   * 页面的初始数据
   */
  data: {
     inputValue: '',
     textAreaMaxLen: 50,
     inputValueLength:0,
  }
   // 显示文本框内容
  bindKeyInput: function (e) {
    console.log("长度============="+e.detail.value.length)
    if(e.detail.value.length>50){
      this.setData({
        inputValueLength:50,
        inputValue: e.detail.value
      })
    }else{
      this.setData({
        inputValueLength:e.detail.value.length,
        inputValue: e.detail.value
      })
    }
  },
});