标签：textarea 微信 detail value height 输入框 inputText 20rpx font

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。