有时候我们在写项目的时候，用到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)}
})好了，简单的小功能就实现了，虽然只是个简单的功能，但是对于提高用户体验还是很有必要的。对大家有帮助，可以点个关注！
