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），但常见问题出在服务端或展示层：

Movio

一款以AI数字人为核心的视频制作工具，可创建虚拟人物出镜的讲解视频，适合企业培训、营销和知识内容制作。

下载

• 后端接收时用了 trim() 或正则误删 \n（例如 .replace(/\s+$/g, '') 会吃掉末尾换行）
• 前端用 innerText 渲染到页面 —— 它把换行当空格，应改用 textContent 或 CSS white-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)。