直接写<textarea></textarea>最简但不实用，需设name确保后端接收、用CSS控制尺寸（如min-height）、处理换行符统一为\n并用white-space:pre-wrap显示，maxlength限制长度且前后端均校验。
怎样用 <textarea> 标签正确声明多行输入区域
直接写 <textarea></textarea> 是最简形式，但这样默认只有 2 行高、无换行提示、提交时可能被截断。必须显式设置 rows 和 cols，或用 CSS 控制尺寸。注意：cols 指字符列数（非像素），实际宽度受字体和容器影响；rows 是可见行数，不是最大行数。
推荐优先用 CSS 的 height 和 min-height 替代 rows，更可控：
<textarea style="min-height: 120px; width: 100%; resize: vertical;" name="content"></textarea>
关键点：
-
resize: vertical防止用户横向拉伸破坏布局 - 不设
max-height或overflow时，内容超长会自动出现滚动条 - 避免同时设
rows和height，CSS 会覆盖 HTML 属性
为什么用户按 Enter 后内容没换行？
HTML 中 <textarea> 的换行符在提交时默认是 \r\n（Windows）或 \n（macOS/Linux），但浏览器渲染时会保留所有空白符，包括换行。问题通常出在后端接收或显示环节：
- PHP 接收后未用
nl2br()转义换行，直接 echo 会导致 HTML 忽略换行 - 数据库字段类型为
TEXT可存换行，但若误用VARCHAR(255)且内容超长，会被静默截断 - 前端 JS 用
.value读取时换行符正常，但若用.innerText取值，会丢失换行
如何限制字数又不干扰用户体验？
maxlength 属性能硬性截断，但用户无法看到已输多少、还剩多少，容易误操作。更实用的做法是结合 JS 实时计数 + 软限制：
<textarea id="post" maxlength="2000"></textarea><br><div class="counter">0 / 2000</div>
监听 input 事件更新计数器，超过阈值时加样式提醒，但不阻止输入（除非业务强要求）：
- 中文、英文、标点都算 1 字，无需特殊处理 Unicode
- 避免用
keydown判断，它捕获不到粘贴、拖入等操作 - 服务端仍需校验
maxlength，防止绕过 JS
移动端 textarea 滚动与聚焦异常怎么解？
iOS Safari 常见两个问题：软键盘弹出后页面未滚动到输入框位置；聚焦后光标卡在顶部看不见。根本原因是 viewport 缩放和滚动锚点失效。
- 确保
<meta name="viewport">包含width=device-width, initial-scale=1，禁用user-scalable=no - 聚焦后手动滚动：
textarea.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) - Android 上若出现输入法遮挡，可临时设
body { padding-bottom: 200px }（根据键盘高度调整）
textarea 内容长度和格式控制本身很简单，难的是跨端行为一致性和后端数据落地的连贯性——尤其换行符处理和截断逻辑，前后端必须对齐。
