可行但需补全断点：无提交机制、无value属性、不触发change事件、placeholder须手动模拟，移动端光标与软键盘行为不稳定；scrollHeight是唯一可靠高度计算方式，因它返回含padding的完整渲染高度，不受字体加载、缩放及行高抖动影响。
直接用 contenteditable 实现自适应高度多行输入框，可行，但不能当 textarea 使——它不提交、没 value、不触发 change、placeholder 需手动模拟，移动端光标和软键盘行为也不稳定。想省事就别选它；真要用，就得补全这些断点。
为什么 scrollHeight 是唯一靠谱的高度计算方式
scrollHeight 返回元素内容实际渲染后的完整高度（含 padding），不受字体加载延迟、缩放、行高抖动影响。而 offsetHeight 包含 border，clientHeight 忽略溢出，硬算行数在中文换行、emoji、富文本片段下必然错。
- 必须先设
element.style.height = 'auto'再赋值scrollHeight，否则浏览器缓存旧高度 - Safari 在空内容时
scrollHeight常返回0或极小值，建议兜底：空时设min-height或强制height: 1.2em - 快速连续输入或粘贴大段文本时，直接赋值会抖动，用
requestAnimationFrame包一层更稳
contenteditable="plaintext-only" vs true 的实际差异
contenteditable="true" 允许粘贴 HTML（比如带样式的微信消息），plaintext-only 会自动 strip 标签、保留纯文本。但注意：plaintext-only 在部分 Android WebView 和旧版 Safari 中不被支持，降级后行为不可控。
- PC 端推荐用
plaintext-only，语义明确、风险低 - 移动端兼容性差，建议 fallback 到
true+ 监听input事件后手动textContent过滤 - 别依赖 CSS 的
-webkit-user-modify: read-write-plaintext-only，它只在 WebKit 有效，且已被标记为非标准
placeholder 模拟必须绕开 :empty 和 :not(:empty)
:empty:before 在有空白字符（如 、换行符）时失效；:not(:empty) 在 iOS Safari 中对 contenteditable 元素支持极差，会导致 placeholder 闪现或不消失。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：监听
input事件，用element.textContent.trim() === ''判断是否为空 - 用 class 控制显示隐藏（如
.has-content），避免伪元素依赖 DOM 状态 - 初始聚焦时，placeholder 要立即隐藏；blur 后若仍为空，再显示——这点常被忽略，导致失焦瞬间 placeholder 闪一下
表单提交前必须手动提取和同步内容
contenteditable 元素不会出现在 form.elements 里，也不会被 FormData.append() 自动收集。submit 时若不处理，字段直接丢失。
- 提交前取值统一用
element.textContent（不是innerText，后者会触发重排） - 如果用了隐藏
<input type="hidden">同步值，记得每次input事件后更新其value，否则 form.reset() 会清掉 hidden input 却不清 contenteditable - 移动端 iOS 上，有时
input事件漏发（尤其快速删除或粘贴），建议加blur事件兜底校验
真正麻烦的从来不是“怎么让高度变高”，而是光标位置、软键盘收起时机、粘贴过滤、空格/换行判定、form reset 同步——这些点没压住，上线后就会在某个机型上突然崩掉。
