textarea 不必显式设置 rows 和 cols，但不设 rows 会导致默认仅显示 2 行；cols 常被 CSS 覆盖，但保留可防纯文本折行；推荐用 CSS 控制尺寸并设 rows 作最低行数提示。
textarea 元素必须显式设置 rows 和 cols 吗？
不是必须，但不设 rows 会导致默认仅显示 2 行（浏览器行为），用户几乎看不到可输入区域；cols 在现代布局中常被 CSS 覆盖，但保留它能防止纯文本渲染时意外折行。更稳妥的做法是用 CSS 控制尺寸，同时保留 rows 作为最低行数提示：
-
rows="4"表示初始可见 4 行，不影响实际可输入长度 - 用
style="width: 100%; min-height: 120px;"替代cols实现响应式宽度和高度 - 避免只写
height: 100px—— 用户粘贴多行内容后可能被截断，min-height更安全
为什么用户提交后收不到换行符？
HTML textarea 值天然保留换行符（\n），但常见问题出在服务端或展示层：
- 后端接收时用了
trim()或正则误删\n（例如.replace(/\s+$/g, '')会吃掉末尾换行） - 前端用
innerText渲染到页面 —— 它把换行当空格，应改用textContent或 CSSwhite-space: pre-line - 数据库字段类型为
VARCHAR且长度过小（如VARCHAR(255)），长留言被截断，换行自然丢失
如何限制输入长度又不破坏用户体验？
用 maxlength 属性最直接，但它会在达到上限时完全阻止输入，且不提示用户。更友好的做法是组合使用：
- 服务端必须校验
maxlength—— 前端限制可被绕过 - 前端加实时字数提示：
<small><span id="char-count">0</span>/500</small>，用input事件更新 - 注意：中文、emoji、全角字符都算 1 个长度（UTF-8 编码下 emoji 可能占多个字节，但
maxlength按 Unicode 字符计数，无需额外处理）
移动端 textarea 自动聚焦后页面乱跳怎么办？
iOS Safari 和部分安卓 WebView 在 textarea 获得焦点时会强制滚动到元素顶部，遮挡输入框或触发导航栏消失。关键缓解手段：
- 移除父容器的
overflow: hidden或transform（这两者会干扰 iOS 的滚动锚定） - 聚焦后手动滚动偏移：
textarea.scrollIntoView({ block: 'nearest' }) - 避免在
autofocus或focus()后立即调用scrollTo—— iOS 有 300ms 延迟窗口，建议加setTimeout(..., 100)
\n 就万事大吉，结果日志里全是平铺一行的“长留言”，查半天才发现 ORM 层自动调了 strip_tags() 或 JSON 序列化前做了 str_replace("\n", " ", $text)。 
