小程序实现textarea随输入的文字行数变化高度自动增加

因为开发小程序遇到需要需要输入框根据输入内容换行，高度跟着变化；需求“随着输入， 动态扩展高度。字符限制100个字”。我们都知道input无法换行，所以需要textarea标签。 通过www.cnblogs.com/beileixinqi… 这个链接做到

wxml:

<view class="text-box">
      <text>{{currentInput}}</text>
      <textarea class="weui-textarea" placeholder="请输入文本" bindinput="getInput" maxlength="1000"/>
</view>

wxss:

.text-box{
    width:100%; 
    position: relative;
    min-height:80rpx;
   margin-top:17rpx;
}
.text-box text{
   display:block;
   visibility:hidden;
   word-break:break-all;
   word-wrap:break-word;
}
.text-box .weui-textarea{
    height:100%;
    position: absolute;
    left:0;
    top:0; 
    overflow-y:hidden;
    word-break:break-all;
    word-wrap:break-word;
}

js:

Page({
  data: {
    currentInput:''
  },
  getInput:function(e){
    this.setData({
      currentInput: e.detail.value
    })
  }
})

提醒： 默认textarea应该是200个字，如果想要增加字数限制，使用maxlength属性 扩展：如果想给textarea输入的文字加删除线，只需把text的 visibility:hidden; 属性去掉，给textarea加一个透明的颜色就可以了。 透明颜色：color:rgba(52, 52, 52,0.5);