微信公众号开发

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

本文主要是介绍微信小程序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输入框 及方法实现的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航