小程序实现textarea行数自动增加

查找网上案例很多，但是都不是很满意，参考大牛案例终结了一下，话不多说代码如下：

实现效果：

前段代码

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

css代码

.text-box{
    width:750rpx; 
    padding: 20rpx 0;
    box-sizing: border-box;
    position: relative;
    min-height:150rpx;
    max-height:240rpx;
    background: rgb(172, 253, 95)
}
.text-box view{
   display:block;
   visibility:hidden;
   word-break:break-all;
   word-wrap:break-word;
}
.text-box .weui-textarea{
    width: 600rpx;
    height:100%;
    position: absolute;
    left:75rpx;
    top:0rpx;
    overflow-y:hidden;
    word-break:break-all;
    word-wrap:break-word;
}

js代码

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

感兴趣的还可以查看：div模拟textarea文本域轻松实现高度自适应

 参考链接：https://blog.csdn.net/liuwengai/article/details/78987957