在HTML中如何实现 textarea 多行文本输入区域

textarea必须成对书写且内容置于标签内，name、rows、cols需显式设置，maxlength限制输入长度，placeholder不换行且仅UI提示，自适应高度需JS实现，换行符提交时需后端统一处理。

textarea 必须成对写，不能自闭合

直接写 <textarea /> 或 <textarea> 没有闭合标签，会导致后续 HTML 解析错乱，尤其在嵌套表单或动态插入时容易丢内容、样式塌陷。浏览器会尝试“修复”，但行为不可控。

正确写法只有这一种：<textarea name="content">默认文字</textarea>。内容必须写在开始与结束标签之间，不是用 value 属性——那是 <input> 的用法。

• name 属性不能省：没有它，表单提交时后端收不到这个字段
• rows 和 cols 建议显式设置：不设的话，Chrome/Firefox 默认只渲染约 2 行 × 20 字符宽，视觉上像被压缩过
• 若用 CSS 控制尺寸（如 height: 120px），rows 仍建议保留，作为语义化 fallback 和可访问性支持

rows 和 cols 不是字符限制，只是初始布局提示

rows="5" 表示“初始可见 5 行”，用户仍可输入 50 行；cols="40" 表示“按等宽字体估算每行约 40 字符宽”，实际宽度受 font-family、letter-spacing 和容器约束影响很大。

真正限制输入长度要用 maxlength 属性（单位是 Unicode 字符数），例如：<textarea maxlength="500"></textarea>。注意：它只防前端误输，后端必须重新校验，否则绕过 JS 就能发超长内容。

立即学习“前端免费学习笔记（深入）”；

• rows 值为纯数字，不带单位（不能写 rows="5px"）
• cols 在 Flex/Grid 容器中可能失效，此时优先用 CSS 的 width 和 min-height
• 移动端 Safari 对 cols 渲染偏差较大，建议搭配 width: 100% 使用

placeholder 换行会被折叠，且聚焦即消失

placeholder 在 <textarea> 中支持良好，但它的行为和 <input> 完全一致：文字是浅灰色、不换行（所有换行符被忽略）、一获得焦点就清空。所以别写 placeholder="第一行↵第二行"，它只会显示成“第一行第二行”。

如果需要多行占位提示，只能用 JavaScript 动态注入默认内容，或用 CSS + ::before 模拟（但无法随输入消失，体验打折）。

• placeholder 文字不会提交到后端，仅作 UI 提示
• disabled 或 readonly 状态下，placeholder 不显示——因为它是为“可输入”状态设计的
• 若 placeholder 被 CSS 遮挡（比如 line-height 过大），检查是否设置了 overflow: hidden 或高度截断

自适应高度要用 JS 监听 input 事件，不能只靠 CSS

原生 <textarea> 不会随内容变高，固定 height 容易截断或留白，设 resize: vertical 又依赖用户手动拖拽。真需求是“输入时自动撑开”，得靠 JS。

核心逻辑只有两步：el.style.height = 'auto' → 触发重排，让 scrollHeight 生效；再设 el.style.height = el.scrollHeight + 'px'。漏掉第一步，scrollHeight 会卡在旧值。

• 务必加 min-height 和 max-height CSS 限制极端情况（比如粘贴一万字）
• iOS Safari 旧版本（≤15.6）中 scrollHeight 可能不准，可 fallback 到 el.offsetHeight
• 避免在 input 事件里频繁重排，简单场景够用；高频输入（如实时协作）建议节流

最易被忽略的是：textarea 的换行符在提交时是 rn（Windows）或 n（macOS/Linux），后端解析时需统一处理，不能假设全是 n。另外，CSS 的 white-space: pre-wrap 对显示服务端返回的内容很关键，否则用户输入的换行会变成空格。