微信小程序--textarea文本框的使用，并实现字数统计-蒲公英云

微信小程序--textarea文本框的使用，并实现字数统计

参考网友的，可惜他的地址找不到了。把代码粘贴出来，希望能帮到有需求的朋友。

上代码：

wxml：

<view class="conts">
  <textarea class="areas" placeholder='订单备注'  maxlength="{
   {orderNoteMax}}" bindinput="inputs">
      <text class="currentWordNumber">{
   {currentWordNumber|0}}/{
   {orderNoteMax}}</text>
      <text class="hint">{
   {texts}}</text>
  </textarea>
</view>

js：

data: {
    orderNote: '',//订单备注
    orderNoteMax: 2000//订单备注最大长度
  },  
//订单备注textarea
  inputs: function (e) {
    // 获取输入框的内容
    var value = e.detail.value;
    this.setData({//更新备注内容到vue缓存
      orderNote: e.detail.value
    })
    // 获取输入框内容的长度
    var len = parseInt(value.length);
    //最少字数限制
    /*if(len <= this.data.min)
      this.setData({
        texts: "加油，够5个字可以得20积分哦"
      })
    else if(len > this.data.min)
      this.setData({
        texts: " "
      })*/
    //最多字数限制
    if(len > this.data.orderNoteMax) return;
    // 当输入框内容的长度大于最大长度限制（max)时，终止setData()的执行
    this.setData({
      currentWordNumber: len //当前字数
    });
  }

wxss：

.conts{
    width: 750rpx;
    height: auto;
    border: 1rpx soldi red;
    margin-top: 30rpx;
    background: #fff;
}
.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: 593rpx;
    top: -1rpx;
}
.hint{
    font-size: 28rpx;
    position: absolute;
    top: 120rpx;
    left: 30rpx;
    color: #FF6600;
}