100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 微信小程序--textarea文本框的使用 并实现字数统计

微信小程序--textarea文本框的使用 并实现字数统计

时间:2023-11-01 00:28:14

相关推荐

微信小程序--textarea文本框的使用 并实现字数统计

参考网友的,可惜他的地址找不到了。把代码粘贴出来,希望能帮到有需求的朋友。

上代码:

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;}

效果:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。