textarea不能用value属性设初始内容，正确方式是将内容写在开始与结束标签之间，如<textarea>默认文字</textarea>；value属性对其无效，浏览器会静默忽略。
textarea 不能用 value 属性设初始内容
很多人写 <textarea value="默认文字"></textarea>，结果页面空空如也——value 对 <textarea> 完全无效，浏览器会静默忽略。它不是 <input>，没有 value 属性语义。
正确方式是把内容直接写在开始与结束标签之间：<textarea name="content">这是默认文字</textarea>。PHP 或其他后端模板里也得这么写：<textarea><?php echo htmlspecialchars($data); ?></textarea>。
- 务必对动态内容调用
htmlspecialchars()，否则<、&会被解析为 HTML 标签，导致截断或 XSS - 别在起始标签后、结束标签前加多余空格或换行——它们会变成真实换行符，影响首行显示
- 闭合标签
</textarea>缺失会导致后续 HTML 全部被吞进文本域，调试时很难发现
wrap 属性决定换行符是否提交
wrap 控制的是「表单提交时」换行符的处理逻辑，和显示无关。默认是 wrap="soft"，但很多人误以为它控制自动折行——其实 textarea 默认就视觉折行，wrap 只管提交值。
-
wrap="soft"（默认）：用户按 Enter 输入的\n会保留；超长行不截断，也不插入额外换行符 -
wrap="hard"：除用户输入的\n外，**浏览器还会在视觉换行处强制插入\r\n**，必须同时设cols才生效，适合邮件正文等强格式场景 -
wrap="off"：禁用视觉自动折行（文本横向滚动），但用户按 Enter 产生的换行仍会提交
后端收到的换行符可能是 \r\n（Windows）、\n（macOS/Linux），建议统一用 str_replace("\r\n", "\n", $input) 归一化，避免日志错位或数据库存储异常。
立即学习“前端免费学习笔记（深入）”；
自适应高度必须先清 height 再读 scrollHeight
直接写 el.style.height = el.scrollHeight + 'px' 很容易越撑越高、删文字不收缩——根本原因是旧的 height 值还在，浏览器把它当约束条件参与计算。
- 每次 input 事件触发时，必须先执行
el.style.height = 'auto'，再赋scrollHeight - 只靠 JS 不够，CSS 必须配
min-height: 80px（防塌陷）、max-height: 300px（防无限拉伸）、overflow-y: auto（超限出滚动条） - iOS Safari 有渲染延迟，建议包一层
requestAnimationFrame；IE11 计算scrollHeight偏小，可做value.replace(/\r\n/g, '\n')预处理 - 所有影响高度的样式（
padding、border、line-height、字体）必须和 JS 计算时一致，推荐显式写box-sizing: border-box
resize 和 maxlength 功能完全不重叠
resize 是纯 UI 行为，只控制右下角拖动手柄是否可见、允许朝哪个方向拉；它和字数、内容、事件监听统统无关。有人想用它“限制输入长度”，这属于根本性误解。
- 字数限制唯一可靠方式是
maxlength="200"，原生支持，粘贴也会截断 -
resize: vertical允许用户拉高，但可能撑破 flex 容器；resize: none才是真禁用，且必须作用于<textarea>本身，父容器上写无效 - 移动端 Safari 默认不显示手柄，
resize属性基本失效；若需禁用，resize: none仍是唯一选择 -
text-indent对 textarea 完全无效——它是替换元素，首行缩进得靠外层<div>加padding-left或富文本方案
最常被漏掉的是 min-height 和样式一致性：没设 min-height，空 textarea 会塌成一条线；JS 计算高度时用的字体大小和 CSS 实际渲染不一致，scrollHeight 就不准——这两点不出问题时一切正常，一出就是光标跳、高度卡、iOS 粘贴后留白。
