rows属性仅控制textarea初始视觉行数，不约束实际输入长度或自适应高度；其计算高度=rows×行高，但受css、字体、用户操作影响而失效；需配合js或min-height/max-height实现真正自适应。
rows属性是纯视觉行数，不是字符数或内容高度
设rows只是告诉浏览器“按多少行高来渲染”，它不控制实际能输入多少文字，也不随内容自动撑开。浏览器会用默认行高（通常约1.2em）乘以rows值算出初始高度，但用户拉伸、CSS覆盖、字体变化都会让它失效。
常见错误是以为rows="5"就能固定显示5行文本，结果发现中文下一行只容3个字，英文却能塞100个字符——这很正常，因为rows不感知内容宽度或换行逻辑。
- 设
rows="4"≈ 初始高度≈4×行高，具体像素取决于当前字体和line-height - 如果用了
resize: vertical或heightCSS，rows仅作初始参考，后续完全被样式接管 -
rows必须是正整数，设rows="0"或rows="-1"会被忽略，退化为浏览器默认（通常是2）
想让textarea随内容自适应？别只靠rows
单纯调大rows治标不治本，尤其在移动端或动态内容场景下容易撑破布局。真要自适应，得配合JS监听输入并重设rows，或用CSS的min-height+max-height组合控制。
简单JS方案示例（监听input事件）：
const textarea = document.querySelector('textarea');
function autoResize() {
textarea.rows = 1;
const scrollHeight = textarea.scrollHeight;
const rowHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20;
textarea.rows = Math.max(3, Math.ceil(scrollHeight / rowHeight));
}
textarea.addEventListener('input', autoResize);
autoResize(); // 初始化
- 先重置
rows="1"再读scrollHeight，避免因旧rows导致高度计算偏差 - 用
getComputedStyle取真实line-height，别硬编码20px——字体缩放、用户设置都会影响 - 加
Math.max(3, ...)防止空内容时缩成1行，破坏可读性
移动端iOS Safari下rows可能被忽略
iOS Safari对textarea的rows支持不稳定，尤其配合font-size缩放或transform时，常出现高度比预期小1～2行。这不是bug，是WebKit对表单控件渲染的特殊处理。
- 强制加
style="line-height: 1.4; font-size: 16px;"能提升一致性 - 避免对
textarea直接设height，改用min-height+max-height更安全 - 测试时务必在真机上验证，模拟器可能不复现
用CSS替代rows控制初始高度更可靠
如果项目已用CSS-in-JS或现代构建工具，直接用min-height代替rows往往更可控，尤其当设计稿明确要求“高度=64px”这种像素级约束时。
<textarea style="min-height: 80px; max-height: 200px; resize: vertical"></textarea>- 此时
rows可删掉，或设为rows="2"作降级（无CSS时兜底） - 注意
min-height值要包含padding——比如padding: 12px，那内容区高度只剩80px - 24px = 56px
真正麻烦的是混合场景：既要支持键盘弹起时自动滚动，又要防iOS Safari把光标切掉一半，还得兼顾屏幕阅读器对rows的语义读取。这时候rows不能只当样式用，得和aria-label、autofocus、scrollIntoView一起调度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
