原生HTML无内置undo/redo API，需JS手动实现状态快照与命令栈管理；document.execCommand()已废弃且不可靠；应使用historyStack与redoStack双数组，配合逻辑数据快照、深拷贝及操作边界定义。
原生 HTML 没有内置的 undo / redo API，所有“撤销重做”功能都得靠 JavaScript 手动实现状态快照 + 命令栈管理——别被“HTML 实现”误导，核心在 JS 层。
为什么不能用 document.execCommand()？
老方案 document.execCommand() 确实曾支持 undo 和 redo 命令，但它已被废弃（Chrome 91+ 完全移除），且行为不一致、无法控制粒度、不兼容 contenteditable 外的场景。现在调用会直接报错：TypeError: document.execCommand is not a function。
- 它只对
contenteditable元素粗粒度生效（比如整段删除/插入），无法精确到字符级或自定义操作 - 快照由浏览器内部维护，开发者无法读取、合并、过滤或持久化
- 在 Shadow DOM、iframe 或现代富文本编辑器（如 Slate、Tiptap）中完全不可用
怎么手动实现 undo/redo 栈？
核心是两个数组：一个存历史状态（historyStack），一个存已撤销的操作（redoStack），每次用户执行可逆操作时，把当前状态深拷贝后推入 historyStack，清空 redoStack；撤销时弹出 historyStack 末尾状态并压入 redoStack。
- 状态快照不能只存 DOM 结构（太重），推荐存逻辑数据（如富文本的 JSON AST、表单字段值对象、Canvas 绘图指令数组）
- 用
JSON.stringify+JSON.parse做浅层深拷贝够用；若含函数、Date、Map 等，改用structuredClone（注意 Safari 16.4+ 才支持） - 避免无限堆积：设上限（如
MAX_HISTORY = 50），push 前检查长度，超限时shift()踢掉最早一条
示例（简易表单撤销）：
立即学习“前端免费学习笔记（深入）”；
let historyStack = [];
let redoStack = [];
const MAX_HISTORY = 50;
const form = document.getElementById('myForm');
<p>function saveState() {
const state = { username: form.username.value, email: form.email.value };
historyStack.push(JSON.parse(JSON.stringify(state)));
if (historyStack.length > MAX_HISTORY) historyStack.shift();
redoStack = []; // 新操作清空 redo
}</p><p>function undo() {
if (historyStack.length === 0) return;
redoStack.push(historyStack.pop());
if (historyStack.length > 0) {
const last = historyStack[historyStack.length - 1];
form.username.value = last.username;
form.email.value = last.email;
}
}</p><p>function redo() {
if (redoStack.length === 0) return;
const state = redoStack.pop();
historyStack.push(state);
form.username.value = state.username;
form.email.value = state.email;
}
contenteditable 元素怎么安全捕获变更？
不能监听 input 事件就保存——它触发太频繁（每敲一个字就来一次），且无法区分是用户输入、粘贴、还是 JS 修改。更可靠的是监听 beforeinput（可取消、能拿到 inputType），并在 input 后延时 10ms 保存（防连续触发）。
- 关键判断：只对
inputType为'insertText'、'deleteContentBackward'、'insertFromPaste'等用户主动行为保存快照 - 禁用 Ctrl+Z/Ctrl+Y 默认行为：
event.preventDefault()，再调用你自己的undo()/redo() - 注意光标位置恢复：保存快照时记录
getSelection().getRangeAt(0)，还原时用range.select()（需处理跨元素边界）
真正难的不是存和取，而是“什么算一次可撤销操作”——输入一个字母、删一整段、拖拽排序、还是点击按钮触发的异步数据更新？这个语义边界得由业务自己定义，JS 栈只是执行容器。
