参考网友的,可惜他的地址找不到了。把代码粘贴出来,希望能帮到有需求的朋友。
上代码:
wxml:
<view class="conts"><textarea class="areas" placeholder='订单备注' maxlength="{{orderNoteMax}}" bindinput="inputs"><text class="currentWordNumber">{{currentWordNumber|0}}/{{orderNoteMax}}</text><text class="hint">{{texts}}</text></textarea></view>
js:
data: {orderNote: '',//订单备注orderNoteMax: 2000//订单备注最大长度}, //订单备注textareainputs: function (e) {// 获取输入框的内容var value = e.detail.value;this.setData({//更新备注内容到vue缓存orderNote: e.detail.value})// 获取输入框内容的长度var len = parseInt(value.length);//最少字数限制/*if(len <= this.data.min)this.setData({texts: "加油,够5个字可以得20积分哦"})else if(len > this.data.min)this.setData({texts: " "})*///最多字数限制if(len > this.data.orderNoteMax) return;// 当输入框内容的长度大于最大长度限制(max)时,终止setData()的执行this.setData({currentWordNumber: len //当前字数});}
wxss:
.conts{width: 750rpx;height: auto;border: 1rpx soldi red;margin-top: 30rpx;background: #fff;}.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: 593rpx;top: -1rpx;}.hint{font-size: 28rpx;position: absolute;top: 120rpx;left: 30rpx;color: #FF6600;}
效果: