小程序输入框高度随内容增加

Who am i

效果图:
未输入时:
未输入时
输入后
输入后

小程序输入框如果要输入框的高度要根据输入文字的内容而变化时。
就不能使用input组件了,要使用textare,设置他的maxlength,因为最大的高度为200左右,不一定能满足要求。然后再用css设置textare的宽度。
最主要的一点是textare有一个事件,bindlinechange(taro的为onLineChange)可以根据输入行的变化,返回行数和文字高度。
bindlinechange:
bindlinechange

我是定义一个变量接收 ( 行数 * 想要的高度 + ‘px’);
然后动态设置textare的高度和外部的高度!
因为我用的是taro-vue(和vue写法一样),所以和原生微信小程序不太一样,但是思路一样,大家可以跟着这个思路修改代码

html:
<textarea
class="input"
:style="{ height: textHei }"
maxlength="1000"
@LineChange=“onLineChange”>
js
Data 中 :
textHei: '30px'

methods中:
onLineChange(e) {
 let line = e.detail.lineCount;
 if (line > 1 && line < 4) { //这里是因为我要设置输入框的最大高度
    this.textHei = line * 25 + 'px';
 } else if (line == 1) {
     this.textHei = '30px';
  }
}

css中其实只需要设置textare的宽度就行

阅读 1.2k
3 声望
0 粉丝
0 条评论
3 声望
0 粉丝
文章目录
宣传栏