小程序textarea文本域字数控制---并显示已输入字数

有时候我们在写项目的时候，用到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