700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 微信小程序~textarea字数限制与计算

微信小程序~textarea字数限制与计算

时间:2022-10-27 00:18:03

相关推荐

微信小程序~textarea字数限制与计算

先看效果图,是不是自己想要的

1、在textarea中绑定bindinput事件。

2、通过var value = e.detail.value;获取textarea的值。

3、通过 var len = parseInt(value.length);获取textarea的长度。

wxml:

<view class="conts"><textarea class="areas" placeholder='留下点评,帮助更多人' minlength="{{min}}" maxlength="{{max}}" bindinput="inputs"></textarea><text class="hint">{{texts}}</text><text class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</text></view>

wxss:

.conts{width:90%;height: auto;/* border: 1rpx solid red; */position:relative;padding-bottom:50rpx;margin:0 auto;}.areas{width:100%;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;right:10rpx;bottom:10rpx;}.hint{font-size: 28rpx;position: absolute;left:20rpx;bottom:10rpx;color: #FF6600;}

js:

Page({data: {texts: "",min: 5,//最少字数max:22, //最多字数 (根据自己需求改变) },//字数限制 inputs: function (e) {// 获取输入框的内容var value = e.detail.value;// 获取输入框内容的长度var len = parseInt(value.length);//最少字数限制if (len < this.data.min){this.setData({texts: "加油,至少要输入5个字哦"})}else if (len >= this.data.min){this.setData({texts: " "})}//最多字数限制if (len > this.data.max) return;// 当输入框内容的长度大于最大长度限制(max)时,终止setData()的执行this.setData({currentWordNumber: len //当前字数 });}})

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