HTML组件无原生撤销能力，因HTML是声明式语言且浏览器原生撤销栈不记录JS修改；表单用节流后的value快照，contenteditable需禁用原生行为并联合监听多事件存innerHTML+选区，复杂场景依粒度选命令模式或快照模式。
HTML 组件本身不提供撤销能力，所有可撤销操作必须由 JavaScript 主动管理状态快照或命令对象——直接依赖 contenteditable 或 input 的原生 Ctrl+Z 只能在极简场景下“看起来可用”，但一旦加入 JS 修改、防抖、格式化或跨浏览器部署，就会失效或冲突。
为什么不能靠 HTML 标签自带 undo 功能
HTML 是声明式标记语言，没有运行时历史栈。所谓“textarea 支持撤销”是浏览器对特定元素的隐式实现，它只捕获用户直接输入，不记录 JS 对 value 的赋值；contenteditable 的原生撤销栈更脆弱，innerHTML =、textContent =、document.execCommand（已废弃）都会清空它。你在 Safari 点一次 undo 按钮没反应，在 Chrome 光标跳到开头，都是因为 JS 和浏览器原生栈在抢控制权。
表单类组件（input / textarea / select）怎么安全存撤销栈
这类组件 DOM 结构简单，适合用状态快照。关键不是存整个 DOM，而是精确抓取可序列化字段值：
- 监听
input事件（含粘贴、删除），但需节流（如 200ms 防抖），避免连打存 100 个中间态 - 快照只取
element.value、element.checked、element.selectedIndex等原始属性，不用innerHTML或outerHTML - 每次新操作前 push 快照，超出最大步数（如 50）就
historyStack.shift() -
undo()时 pop 并赋值，同时手动element.focus()和element.setSelectionRange()恢复光标位置（否则光标会跑到开头）
contenteditable 编辑器怎么避免撤销失效
这是最易踩坑的场景：浏览器原生撤销和 JS 实现互相干扰，DOM 结构变化导致光标丢失，中文输入法下快照时机错乱。必须做三件事：
立即学习“前端免费学习笔记（深入）”；
- 禁用原生行为：
editor.addEventListener('keydown', e => { if ((e.ctrlKey || e.metaKey) && ['z', 'y'].includes(e.key)) e.preventDefault(); }) - 多事件联合监听：
input（英文输入）、compositionend（中文输入完成）、mouseup（选区变化）、paste（粘贴），统一触发快照 - 快照内容必须包含两部分：
editor.innerHTML（纯文本或安全 HTML 字符串） + 序列化的选区（用getSelection().getRangeAt(0)提取startContainer相对于 editor 的路径数组和startOffset） - 还原时先设
innerHTML，再用路径递归查找节点并range.setStart(node, offset)，加 fallback 逻辑（比如按文本内容匹配定位）
复杂组件（可视化画布、富文本插件）该用命令模式还是快照
取决于变更粒度和性能敏感度：
- 命令模式更适合高频、结构化操作（如“添加图层”“旋转 30°”）：每个命令含
execute()和unexecute()，栈里存对象而非数据，内存占用小，但开发成本高，必须确保反向操作 100% 可逆 - 快照模式适合低频、不可预测修改（如用户手写 HTML、拖拽布局）：用
structuredClone()（Chrome 98+/Firefox 94+）或JSON.parse(JSON.stringify())（兼容旧版但丢函数/Date）深拷贝状态树；注意剔除 DOM 节点、事件监听器等不可序列化引用 - 无论哪种，撤销栈必须存在主线程——Worker 只能压缩快照或算 diff，不能管
focus()、getSelection()这些 DOM API
真正难的不是 push/pop 数组，而是定义“什么算一次可撤销操作”：用户连打 5 个字要不要合并？加粗后删一个字符算两步还是一步？这些边界问题没有标准答案，得结合编辑器交互逻辑和用户预期来定。
