小程序实现textarea随输入的文字行数变化高度自动增加
Posted Apple
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序实现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);
以上是关于小程序实现textarea随输入的文字行数变化高度自动增加的主要内容,如果未能解决你的问题,请参考以下文章