微信小程序---文本域输入带最大字数限制

微信小程序---文本域输入带最大字数限制

效果

代码

js

 
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    min: 0,
    max: 100,
    explain: '', //说明
    password: ''
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
 
  },
  inputeExplain(e) {
    var value = e.detail.value;
    let dataset = e.currentTarget.dataset;
    this.data[dataset.obj] = value;
    var len = parseInt(value.length);
    if (len > this.data.maxAddr) return;
    this.setData({
      currentWordNumber: len
    });
    if (this.data.currentWordNumber == 100) {
      wx.showModal({
        title: '提示',
        content: '您输入的次数已达上限',
      })
    }
 
  },
 
})

wxss

/*  */
.inputBox {
    width: 100%;
    /* height: 76rpx; */
    display: flex;
    box-sizing: border-box;
    /* padding: 0 20rpx; */
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
}
 
.textarea2 {
    width: 100%;
    min-height: 200rpx;
    max-height: 400rpx;
    line-height: 40rpx;
    background-color: #f6f6f6;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    /* padding: 20rpx 0; */
    padding: 20rpx;
    box-sizing: border-box;
    /* line-height: 60rpx; */
    color: #2B2B36;
    position: relative;
    margin-top: 30rpx;
}
 
.currentWordNumber {
    position: absolute;
    bottom: 24rpx;
    right: 26rpx;
    color: #888;
}

wxml

     <!-- 输入框 -->
<view class="inputBox">
    <textarea class="textarea2" auto-height minlength="{{min}}" maxlength="{{max}}" placeholder="请输入邮寄地址" placeholder-class="phcolor" bindinput="inputeExplain" data-obj="explain" value="{{explain}}">
        <text class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</text>
    </textarea>
</view>