有时候我们在写项目的时候,用到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) } })
转载至https://blog.csdn.net/qq_42345906/article/details/85336060