E2.02.2auto-grow ceiling设计
自动增高需设定上限
别名: 自适应文本域 · autosize textarea · 输入框无限增高
概念解释
自动增高（auto-grow）让多行框随内容向下长，避免框内出现第二层滚动。若没有增高上限（auto-grow ceiling），框会把页面上的标签、后续字段和提交按钮顶出视口，作者失去对整页的位置感。上限说的是「长到哪一像素或哪一行之后改为内部滚动」，不是一开始该有多高，也不是让用户去拖角落。
机制
框内滚动和页内滚动是两套坐标系。自动增高的动机是消灭框内滚动，让光标始终在正在写的那一行附近。没有顶之后，每新增一行都在改后续布局：提交按钮下移、页脚消失、键盘再吃掉半屏，作者要写一段话却找不到「完成」。触屏上问题更硬——软件键盘已经占了视口下半，无上限的框把剩余区域变成一条缝。上限把增长从「无限排版」改成「有界视口」：在界内跟手长高，越界后把滚动交还给控件自己，页面其余结构稳住。
边界
聊天输入、代码块、全屏写作区的「页面」就是编辑器本身，上限可以很高，甚至等于视口。嵌在多字段表单里的备注框不能享受同样待遇：它只是页上的一个控件。粘贴进来的超长日志会一次冲破任何合理上限，必须在粘贴后立刻改走内部滚动，而不是让页面跳到几千像素外。上限若设在刚好挡住下一字段标签的位置，用户会以为后面没有内容。动画跟手的增高若每键都重排整页，低端机上会掉帧，表现为输入延迟。
怎么落地
- 为自动增高设死像素或行数顶：常见做法是长到视口的一小半或六到八行可视行，之后出现框内滚动条。
- 保证增高过程中提交按钮、后续字段标签仍能被滚到，不要让框把表单尾部顶到无法发现。
- 粘贴大段文字时一次计算最终高度并封顶，不要逐行把页面撑开。
- 验证：在手机弹出键盘后贴入一篇长文，看提交按钮是否仍可滚到、页面是否被撑出异常长的空白。若要靠狂滚才能提交，就降低上限。