首页 > 其他分享 >textarea的文字数限制

textarea的文字数限制

时间:2022-11-04 09:00:43浏览次数:43  
标签:文字 限制 textarea top len value 备注 30rpx setData

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

效果图

标签:文字,限制,textarea,top,len,value,备注,30rpx,setData
From: https://www.cnblogs.com/Sultan-ST/p/16856539.html

相关文章