微信小程序实现动态监听textarea字数并且对其进行限制

效果图

我们需要实现的就是输入字数然后给予限制，最高只能输入200字，并且我们每次输入一个字符我们的值就会发生改变
**实现原理：**我们监听输入框的内容对其监听bindinput对其实时监听，取到输入框里面的内容，和限制的字数进行对比，如果小于限制字数，我们取到实时字符给与赋值，如果大于最高限制数，我们就将最大限制数进行赋值到变量中

<view class="box">
  <view class="section">
    <textarea bindinput="bindinput"  maxlength="{{max}}"auto-height placeholder="请输入商户的简介，字数限制在200字以内。" placeholder-class="placehoder" />
  </view>
  <view class="foot">
    <text>{{currentWordNumber}}</text>/200
    </view>
</view>
<view class="button" > <text>保存</text></view>

注意 maxlength="{{max}}"auto-height在给textarea加入这两个属性的时候，我们的texearea就可以自动换行，并且最大限制数是maxlength="{{max}}"
下面将写一下基本样式

page{
  background:rgba(245,245,245,1);
}
.box{
  width: 750rpx;
  height: 478rpx;
  background:rgba(255,255,255,1);
  margin-top: 20rpx;
  padding: 26rpx 32rpx;
  position: relative;
}
textarea{
  width: 90%;
  height: 100%;
  /* background-color: red;  */
}
.placehoder{
  font-size:30rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(192,196,204,1);
line-height:42rpx;
}
.foot{
  position: absolute;
  bottom: 40rpx;
  left: 610rpx;
  font-size:30rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(192,196,204,1);
line-height:42rpx;
}
.button{
  width: 686rpx;
  height: 94rpx;
  background:linear-gradient(90deg,rgba(75,173,255,1) 0%,rgba(37,152,247,1) 100%);
  border-radius:4px;
  margin: 60rpx auto;
  text-align: center;
}
.button text{
  width:139px;
/* height:48px; */
display: inline-block;
/* background-color: red; */
margin-top: 23rpx;
  font-size:34rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
line-height:48rpx;
}

下面就是我们基本的逻辑实现功能

// pages/shopjianjie/shopjianjie.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    max: 200,
    currentWordNumber: 0
  },
  bindinput:function(e){
    var value = e.detail.value;
    var len = parseInt(value.length);
    if(len<=this.data.max){
      this.setData({
        currentWordNumber:len
      })
    }else{
      currentWordNumber:this.setData.max
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

这样我们就实现了这样的一个效果了