小程序实现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随输入的文字行数变化高度自动增加的主要内容,如果未能解决你的问题,请参考以下文章

实现输入框高度随内容变化

如何让textarea的高度自适应

textarea高度自适应

小程序 textarea高度自适应?

js库链接

怎么调整textarea的高度随文本变化,求CSS