textarea 必须显式设置 rows 和 cols 属性，否则浏览器默认值不可靠且移动端表现不一致；应结合 html 属性提供语义和基础尺寸，再用 css 精确控制样式与响应式行为。
textarea 没有强制默认值，但浏览器会 fallback 到 rows="2" 和 cols="20" —— 这不是标准规定，而是各浏览器实际行为，不能依赖。
为什么不能靠浏览器默认值
移动端尤其明显：cols="20" 在小屏上可能撑出横向滚动条，rows="2" 又常显得太矮，用户第一眼看不到输入提示或 placeholder。更麻烦的是，不同浏览器（比如 Safari iOS vs Chrome Android）对默认 cols 的像素换算不一致，导致宽度忽宽忽窄。
- 不写
rows/cols→ 渲染不可控，调试时容易误判是 CSS 问题还是 HTML 缺失属性 - 写了但值过小（如
rows="1"）→ 失去多行语义，视觉上像单行框，还可能触发奇怪的垂直居中 bug - 只写
rows不写cols→ 某些旧版 Edge 会把宽度收缩到内容最小宽度，而非撑满容器
推荐设置方式：显式声明 + CSS 覆盖
先用 HTML 属性提供基础可访问性尺寸，再用 CSS 精确控制。这样既满足无障碍要求（AT 工具读取 rows 做语义判断），又保证视觉一致性。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- HTML 中设合理起点：
<textarea rows="4" cols="50"></textarea> - CSS 中覆盖尺寸：
textarea { width: 100%; min-height: 80px; resize: vertical; } - 避免只用 CSS 控制高度而删掉
rows—— 后续 JS 通过element.rows读取时会返回0或undefined，影响动态调整逻辑
JS 动态改行数时注意 rows 是字符串还是数字
textarea.rows 属性读写都接受数字，但赋值时传字符串（如 el.rows = "6"）也能工作；不过如果后续要参与计算（比如 el.rows += 2），字符串会导致拼接而非加法，变成 "42" 而非 6。
- 安全写法：
el.rows = 6（数字） - 从 DOM 读取后做运算前，先转成数字：
const currentRows = Number(el.rows) + 2 - 别混淆
rows和style.height：前者影响语义和初始渲染，后者只管样式；设了style.height但没设rows，某些屏幕阅读器可能忽略该控件的多行特性
真正容易被忽略的是：哪怕你用 CSS 把 textarea 拉得再高，如果 rows 还是 2，在表单重置（form.reset()）时它会瞬间缩回两行——因为重置操作依据的是 HTML 属性值，不是 computed style。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
