小程序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