微信小程序textarea 限制字數js

                                                         

wxss:
.refund{
  width: 96%;
  margin: auto;
  display: flex;
  flex-direction: column;
}
.refund .text{
  color: #333333;
  font-size: 28rpx;
  line-height: 70rpx;
}
.refund .text .xt{
  padding-left: 16rpx;
 color: #999999;
 font-size: 22rpx;
}

/* textarea */
.edit_tkyy{
  width: 96%;
  margin: auto;
  height: 230rpx;
  background: #fff;
  border-radius: 20rpx;
  font-size: 28rpx;
  text-indent: 1em;
  padding: 10rpx;
}
.currentWordNumber{
   color: #999999;
  font-size: 24rpx;
  position: absolute;
  right: 20rpx;
  top: 195rpx;
}

wxml:
<view class="refund">
  <view class='text'>退款說明<text class='xt'>(選填)</text></view> 
  <textarea class='edit_tkyy' bindinput='input' rows="3" placeholder="請輸入退款備註" maxlength="100" hidden='{{dleg3}}'>
  <text class="currentWordNumber">{{currentNoteLen|0}}/{{noteMaxLen}}個字</text>
</textarea>
</view>

wx.js:
data: {
    isopen:false,
    tihuoWay: '請選擇退款原因',
    noteMaxLen: 100,  //字數限制
    currentNoteLen: 0, //輸入的字數
  },

input(event) {
    var value = event.detail.value,
      len = parseInt(value.length);
    let that = this;
    this.setData({
      currentNoteLen: len
    })
  }

 

data: {
    noteMaxLen: 500,
    currentNoteLen: 0,
    opinion: "",
  },

onTijiao(e) {
    this.setData({
      opinion: e.detail.value.yijian,
    });
    var data = {
      opinion: this.data.opinion,
    }
    if (this.data.opinion == "") {
      wx.showToast({
        title: '意見不能爲空',
        icon: 'loading',
        duration: 1500,
        mask: true
      })
    } else {
      // var that = this;
      // opinionModel.createOpinion(data, (scallback) => {
      //   wx.showToast({
      //     title: '提交成功',
      //     duration: 1500,
      //     mask: true
      //   })
      //   that.setData({
      //     opinion: "",
      //     currentNoteLen: 0
      //   })
      // });
    }
  },

input(event) {
    var value = event.detail.value,
      len = parseInt(value.length);
    let that = this;
    this.setData({
      currentNoteLen: len
    });
  },

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章