小程序實現textarea隨輸入的文字行數變化高度自動增長

參考連接：https://blog.csdn.net/liuwengai/article/details/78987957

該實現方法是根據上面的連接改編爲小程序的實現，代碼以下：

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);