码迷,mamicode.com
首页 > 其他好文 > 详细

小程序实现textarea随输入的文字行数变化高度自动增加

时间:2018-07-09 16:30:55      阅读:756      评论:0      收藏:0      [点我收藏+]

标签:增加   参考   tail   .net   value   log   属性   put   ace   

参考链接: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;
}
.text-box text{
  display:block;
  visibility:hidden;
  overflow-y: hidden; 

}
.text-box .weui-textarea{
    height:100%;
    position: absolute;
    overflow-y: hidden;
   left:0;
   top:0;
}

js:

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

实现效果如图:

技术分享图片

 

提醒一下:默认textarea应该是200个字,如果想要增加字数限制,使用maxlength属性

 

小程序实现textarea随输入的文字行数变化高度自动增加

标签:增加   参考   tail   .net   value   log   属性   put   ace   

原文地址:https://www.cnblogs.com/beileixinqing/p/9284149.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!