微信小程序textarea输入框 及方法实现

wx.ml

    <view class="con">
        <textarea name="" id="" class="inputText" cols="30" rows="10" value="{{inputText}}" placeholder="（选填）留下您的评语吧～" bindinput="getInputText"></textarea>
        <input disabled class="textword" value="{{inputTextLen+'/100'}}" />
    </view>

View Code

wx.ss

.con {
  width: 630rpx;
  /* height: 250rpx; */
  position: relative;
  margin-top: 10rpx;
  flex-wrap: wrap;
  margin-bottom: 60rpx;
}

.inputText {
  display: block;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  width: 682rpx;
  height: 250rpx;
  border-radius: 20rpx;
  border: 1rpx solid #D8D8D8;
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 32rpx;
}

.textword {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 24rpx;
  text-align: right;
}

View Code

wx.js

data:{
    inputText: '',
    inputTextLen: 0
},  
//输入自动计算字体长度
  getInputText: function (e) {
    // console.log(e.detail.value);
    // if (e.detail.value !== this.inputText) {
    //   this.inputText = e.detail.value;

    // }
    let inputText = e.detail.value;
    if (e.detail.value.length > 100) {
      inputText = inputText.substring(0, 100);
    }
    this.setData({
      inputText: inputText,
      inputTextLen: 0 || inputText.length
    })
  },

View Code

 

标签：textarea,微信,detail,value,height,输入框,inputText,20rpx,font
来源： https://www.cnblogs.com/lvlisn/p/15660183.html