<textarea>需用标签内文本设初始值、CSS或rows/cols控尺寸、value属性读写内容、input事件监听；placeholder和required有IE兼容问题；自适应高度应先设height:auto再赋scrollHeight，配合box-sizing:border-box。
HTML <textarea> 的基本用法和常见失控行为
直接写 <textarea> 标签，浏览器会渲染成可多行输入的框，但它默认没有尺寸、不自动适应内容、提交时还可能丢掉换行——这不是 bug，是它的设计逻辑：它只负责“容器”，内容行为得你来管。
常见错误现象：value 属性设了但页面不显示；用户输完回车，后端收到的却是空格或 \r\n 混乱；用 innerHTML 或 textContent 读取内容结果为空。
- 初始值必须写在开始标签和结束标签之间，不是靠
value属性：<textarea>默认文字</textarea> - 想控制大小，优先用 CSS 的
width/height或rows/cols属性（后者是 HTML 原生属性，语义更准） - 换行在 HTML 中由
\n表示，但提交时浏览器会按表单编码规则处理（通常转成%0A），后端需正确解码，不能简单当空格切
JS 读写 <textarea> 内容的正确姿势
别碰 innerHTML，也别依赖 textContent 在所有浏览器里一致——最稳的是直接读写 value 属性，它始终反映当前用户输入（包括实时变化）。
使用场景：表单校验、字数统计、输入同步到预览区、防重复提交前截取内容。
立即学习“前端免费学习笔记（深入）”；
- 读取：
document.querySelector('textarea').value—— 这是唯一推荐方式 - 写入：
el.value = '新内容'，不是el.innerHTML = '...'，后者会破坏换行解析 - 清空：
el.value = ''，不是el.innerHTML = ''，否则再聚焦时光标可能错位 - 监听输入：
input事件比change更及时，适合实时响应（如限制字数）
placeholder 和 required 在 <textarea> 上的兼容性坑
placeholder 在 IE9 及更早版本完全不支持；required 虽然现代浏览器都支持，但验证失败时提示文案不可定制，且空格 + 换行会被当成“非空”通过校验。
性能影响很小，但体验断层明显：用户在老系统里看不到提示，或输了一堆空行以为填了，提交却报错。
- IE 兼容方案：用 JS 模拟 placeholder（监听
focus/blur切换 value 和提示文字） - 防空格绕过：
if (!el.value.trim()) { /* 视为未填写 */ }，不能只判el.value === '' -
required不影响 DOM 结构或渲染，但会阻止表单 submit，这点和<input>一致
自适应高度的 <textarea> 怎么做才不卡
所谓“自适应”，本质是监听输入后动态调整 height，但频繁重排会卡顿。核心矛盾在于：每次改 height 都触发 layout，而 input 事件频率极高。
容易踩的坑：用 scrollHeight 直接赋给 style.height，但没考虑边框、内边距、字体差异，导致反复抖动；或没节流，连打字都变慢。
- 安全做法：先
el.style.height = 'auto'，再el.style.height = el.scrollHeight + 'px' - 必须加
box-sizing: border-box，否则scrollHeight包含 padding 和 border，会撑大 - 建议加
resize: none防止用户拖拽破坏自适应逻辑 - 高频输入下可加
requestAnimationFrame节流，避免连续 layout
有些细节比如换行符在不同平台的表现（\r\n vs \n）、CSS 的 white-space 对预览渲染的影响，不常碰，但一碰就卡住半天。
