小程序textarea文本域字数控制---并显示已输入字数

有时候我们在写项目的时候，用到input或者textarea的时候，可能需要对输入的字数进行一个限制和显示，效果图如下：

输入文字后的效果图是这样的：

下面闲话少说 把这个小功能分享给大家，先是wxml：

<view class="conts">
    <textarea class="areas" placeholder='空空如也，快点评论吧' minlength="{{min}}" maxlength="{{max}}" bindinput="inputs"> 
        <text class="currentWordNumber">{{currentWordNumber}}/{{max}}</text>
        <text class="hint">{{texts}}{{num}}{{textss}}</text>
    </textarea>
</view>

然后wxss:

.conts{
  width: 750rpx;
  height: auto;
  border: 1rpx soldi red;
  margin-top: 30rpx;
}
.areas{
  height:152rpx;
  font-size: 30rpx;
  text-indent: 28rpx;
  border: 1rpx solid gainsboro;
  padding-top: 30rpx;
  margin: 0 auto;
  overflow: hidden;   
  position: relative; 
}
.currentWordNumber{
  font-size: 28rpx;
  color: gray;
  position: absolute;
  left: 480rpx;
  top: -6rpx;
}
.hint{
   font-size: 28rpx;
   position: absolute;
   top: 130rpx;
   left: 320rpx;
   color: #FF6600;
}

最后是js:

Page({
  data: {
    texts: "至少需要15个字",
    min: 15,//最少字数
    max: 520, //最多字数 (根据自己需求改变) 
    currentWordNumber:0
  },

  //字数限制  
  inputs: function (e) {
    // 获取输入框的内容
    var value = e.detail.value;
    // 获取输入框内容的长度
    var len = parseInt(value.length);
    console.log(len)
    //最少字数限制
    if (len <= this.data.min)
      this.setData({
        texts: "至少还需要",
        textss: "字",
        num:this.data.min-len
      })
    else if (len > this.data.min)
      this.setData({
        texts: " ",
        textss: " ",
        num:''
      })

    this.setData({
      currentWordNumber: len //当前字数  
    });
    //最多字数限制
    if (len > this.data.max) return;
    // 当输入框内容的长度大于最大长度限制（max)时，终止setData()的执行

    console.log(this.data)
  }
})

好了，简单的小功能就实现了，虽然只是个简单的功能，但是对于提高用户体验还是很有必要的。对大家有帮助，可以点个关注！