查找网上案例很多,但是都不是很满意,参考大牛案例终结了一下,话不多说代码如下:
实现效果:
前段代码
<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