微信小程序的textarea之auto-height自动增高内容不完全可见解决方案

textarea 是微信小程序提供的 form 原生组件，作为多行输入框输入一些地址、备注之类的蛮合适的。

在日常代码搬运的生活中，我们常常会用到 auto-height 这个属性来设置自动增高，简单来说就是随着内容的增多自动撑开 textarea 的高度，不过设置这个属性之后组件设置 style.height 就不生效了。

在小程序的实例里可以看到设置了 auto-height 属性和不设置两种情况

有个问题，第一行怎么了？为什么没有完全显示出来

找到一个方法可以使得 auto-height 可以自动增高而不会遮掩输入内容，也不会出现滚动条

代码如下

textarea{
	min-height:32px;
	/* 设置 min-height 是为了设置 textarea 的高度 */
	/* 因为行内样式优先级比较高，所以曲线救国 */
	font-size:16px;
	line-height:16px;
}

设置行高和字体大小一样大时自动增高功能很正常，在增加到最小高度之后会随着行数线性增加内容高度。

当行高增加一定程度时，会出现无法继续输入字符串

这种情况应该是微信小程序在 textarea 里默认设置了 maxlength 的原因，而 maxlength 对应组件的最大输入长度，设置为 -1 的时候不限制最大长度。

我们就从善如流，试试不限最大长度直接设置 maxlength 为 -1，发现超出默认的最大长度时继续输入换行时会出现滚动条，第一行数据被遮蔽了

我们继续输入字符串时，会发现过了那一行有滚动条再到下一行时自动增加的高度又正常了

鉴于目前这种情况，我觉得还是尽量避免出现这种内容被遮蔽的情况，而实际使用时也不一定需要那么多字符。

总而言之，像 auto-height 属性自动增高的，去设置 textarea 的字体大小和行高一致，虽然丑了点，但是会很正常的显示自动增高的内容










下面不要看了，本来想分析下的，能力实在有限


我们重新编译页面，使页面回到初始化状态，查看此时的 Wxml 可以发现 设置了 auto-height 的 textarea 控件多了个 height 值为 19.2px

由于微信小程序控制台不像浏览器这样会将相关属性显示出来

我们就手动设置下 textarea 的相关属性方便观察，目前只输入第一行数据时整体高度56，内容高度32

在输入第二行数据时高度变成了63，相对于第一行56增加了高度7，内容高度39

在输入第三行数据时高度变成了82，比输入第二行时高度63增加19，比输入第一行56时高度增加了26，内容高度58

在输入第四行数据时高度变成了101，比输入第三行数据82时高度增加19，比输入第二行数据63时高度增加了38，比输入第一行数据56时高度增加了45，内容高度83

这些数据似乎很混乱，难以找出其中增加的规律，抱歉我放弃了