rows属性仅控制textarea初始视觉行数，不约束输入长度；需结合min-height、resize和js动态调整实现稳定自适应。
用 <textarea></textarea> 创建多行文本输入框后，调整输入区域大小不能只靠 HTML 属性，得结合 rows、CSS 和交互行为综合控制。核心是让尺寸既稳定可读，又支持用户操作和响应式适配。
用 rows 控制初始高度（最基础也最关键）
rows 是唯一原生控制“可见行数”的 HTML 属性，推荐设为 4 或以上，太小（如默认 2 行）容易被忽略：
-
rows="6"表示加载时显示约 6 行高度，不限制实际输入长度 - 务必保留 cols（如
cols="50"），即使后续用 CSS 覆盖——它在无样式环境或纯文本渲染时仍起作用，避免意外折行 - 不写 rows 会导致浏览器按最小高度（通常仅 2 行）渲染，体验差
用 CSS 精确控制宽高与拉伸行为
直接设 height 容易覆盖 rows 并导致文字截断或滚动条突兀；更稳妥的方式是：
- 用
min-height: 120px替代固定 height，确保至少显示几行内容 - 加
resize: vertical允许用户手动拉伸高度（禁用则用resize: none） - 配合
width: 100%实现自适应宽度，再用max-width防止过宽 - 设
overflow-y: auto，内容超长时才出现滚动条，视觉更干净
让高度随内容自动撑开（类似聊天框）
如果希望输入框始终贴合文字高度，需用 JavaScript 动态调整：
- 监听
input事件，先设height: auto，再读取scrollHeight赋值 - 必须加
overflow: hidden，否则可能出双滚动条 - 移动端 iOS Safari 对 scrollHeight 计算有延迟，可用
requestAnimationFrame容错
注意移动端与字体渲染细节
iPhone 上常出现文字贴顶、光标偏移，往往不是大小问题，而是行高计算异常：
- 显式设置
font-size和line-height（推荐无单位数值，如line-height: 1.4） - 用
box-sizing: border-box统一盒模型，避免 padding 导致尺寸偏差 - 安卓 WebView 对
padding-top/padding-bottom解析不稳定，建议改用padding-block
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
