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

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

上代码:

wxml:


  

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;
}

效果:

微信小程序--textarea文本框的使用,并实现字数统计_第1张图片

你可能感兴趣的:(小程序)