参考链接: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);