微信小程序文本框textarea实时提示还可以输入多少文字?

<!--pages/index29/index29.wxml-->

<page>

<view class="conts">

<textarea class="areas" placeholder='个性签名' minlength="{{min}}" maxlength="{{max}}" bindinput="inputs">

<text class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</text>

<text class="hint">{{texts}}</text>

</textarea>

</view>

</page>

// pages/index29/index29.js

Page({

/**

* 页面的初始数据

*/

data: {

texts: "至少5个字",

min: 5,//最少字数

max: 30, //最多字数 (根据自己需求改变)

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function(options) {

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function() {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function() {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function() {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function() {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function() {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function() {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function() {

},

inputs: function (e) {

// 获取输入框的内容

var value = e.detail.value;

// 获取输入框内容的长度

var len = parseInt(value.length);

//最少字数限制

if (len <= this.data.min)

this.setData({

texts: "最低五个字"

})

else if (len > this.data.min)

this.setData({

texts: " "

})

//最多字数限制

if (len > this.data.max) return;

// 当输入框内容的长度大于最大长度限制(max)时,终止setData()的执行

this.setData({

currentWordNumber: len //当前字数

});

}

})

/* pages/index29/index29.wxss */

page {

width: 750rpx;

background: #F2F2F2;

}

page .conts {

width: 750rpx;

height: auto;

border: 1rpx soldi red;

margin-top: 30rpx;

}

page .areas {

width: 750rpx;

height: 220rpx;

background: rgba(255, 255, 255, 1);

font-size: 30rpx;

text-indent: 28rpx;

border: 1rpx solid gainsboro;

margin-top: 30rpx;

margin: 0 auto;

overflow: hidden;

position: relative;

}

page .currentWordNumber {

font-size: 28rpx;

color: gray;

position: absolute;

left: 600rpx;

top: 160rpx;

}

page .hint {

font-size: 28rpx;

position: absolute;

top: 165rpx;

left: 0rpx;

color: #f60;

}