contenteditable 元素需手动补足表单能力：用 textcontent 读取内容、tabindex="0" 支持焦点、监听 input 事件、scrollheight 实现自适应高度、隐藏 input 同步提交值，并手动模拟 placeholder 与处理跨端兼容问题。

contenteditable 元素如何表现得像 <input> 或 <textarea></textarea>

它本身不是表单控件，不参与表单提交、不触发 change 事件、没有 value 属性——直接当输入框用会掉进兼容性和行为陷阱里。

想让它“像”，就得手动补足缺失能力：

• 用 textContent 或 innerText 读取内容（注意：含 HTML 标签时优先用 textContent，避免解析风险）
• 用 element.focus() 激活，但需加 tabindex="0" 才能被键盘焦点捕获
• 监听 input 事件（不是 change）来响应每次编辑，包括粘贴、删除、格式化操作
• 若需回车换行，确保元素是块级（如 div），且 CSS 中设 white-space: pre-wrap 和 overflow-wrap: break-word

高度自适应的可靠做法：靠滚动高度而非文本行数

用 scrollHeight 是目前最稳定的方式，它反映内容实际渲染高度，不受字体、行高、padding 等影响。别信 offsetHeight 或硬算行数——那些在不同浏览器、缩放、字体加载阶段都容易出错。

典型实现逻辑：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 初始设 min-height 和 max-height，并禁用垂直滚动条：overflow-y: hidden
• 在 input 事件回调中，先 element.style.height = 'auto' 重置，再赋值 element.style.height = element.scrollHeight + 'px'
• 为防抖动，可加 requestAnimationFrame 包一层，尤其在快速输入或粘贴大段文本时
• 注意：Safari 对 scrollHeight 在空内容时返回不准确（可能偏小），建议空值时设个最小高度（如 1.2em）兜底

为什么不能直接用 textarea？常见绕不开的场景

不是所有需求都能退回到 textarea：富文本编辑、@用户、语法高亮、内联编辑（比如表格单元格）、光标定位到特定字符位置等，都依赖 contenteditable 的 DOM 级控制能力。

这时候必须接受它的“非表单性”：

• 提交前要把内容从 div[contenteditable] 提取出来，塞进隐藏的 <input type="hidden"> 字段里
• 不要依赖 form.elements 自动收集；用 FormData 时需手动 append('field', element.textContent)
• 移动端 iOS 上，contenteditable 的光标定位和软键盘行为仍有偶发异常，建议加 user-select: text 防止误选区域

focus/blur 与 placeholder 的模拟要点

contenteditable 没有原生 placeholder，也没有可靠的 :placeholder-shown 伪类支持。必须手动控制：

• 用一个同级 <span class="placeholder"></span> 覆盖在元素上，初始 display: block；当 textContent.trim() !== '' 时 display: none
• 监听 focus 和 blur，但注意：点击空白处可能触发 blur 后立刻 focus（因内部 selection 变化），建议加 setTimeout 延迟判断是否真失焦
• IE/Edge 已淘汰，但若还需兼容，document.execCommand('insertText') 替代 textContent 写入更稳妥（不过现代项目基本可忽略）

真正难的不是让高度“动起来”，而是处理空内容、全选删除、粘贴 HTML、撤销重做、跨浏览器 selection 保持——这些细节没统一 API，得一个个 case 补丁。别指望一套 CSS + 三行 JS 就搞定。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！