HTML无内置重做功能，需JavaScript维护undo/redo栈；document.execCommand已废弃且兼容性差；应记录差异化操作、同步状态、恢复光标等细节。
HTML 本身没有内置的“重做”或“恢复上一步”功能，它只是静态标记语言；实现用户操作的重做，必须靠 JavaScript 维护操作历史栈并手动触发回退/重做逻辑。
为什么 document.execCommand 不再可靠
老方案常依赖 document.execCommand("undo") 或 "redo"，但这个 API 已被废弃（Chrome 97+ 完全移除），且行为在不同浏览器中不一致——比如 Safari 对 redo 支持极差，Firefox 早就不响应这些命令。
- 它只对富文本编辑器（
contenteditable元素）有限生效，对表单输入、Canvas 绘图、React 状态变更等完全无效 - 无法控制“哪一步”被重做，也不能合并连续输入（如连打 5 个字算 1 步还是 5 步）
- 现代框架（Vue/React）接管 DOM 更新后，
execCommand基本失效
用 JavaScript 实现可预测的重做栈
核心是两个数组：undoStack 存已执行操作的快照或逆向动作，redoStack 存刚撤销的操作，供重做时弹出执行。
- 每次用户操作（如输入、删除、拖拽）后，调用
pushToUndoStack()保存当前状态或生成反向操作函数 - 点击“重做”时，从
redoStackpop()出一个操作并执行，再把它push()回undoStack - 避免深拷贝整个 DOM 树——优先存差异（如
{type: "insert", pos: 12, text: "x"}），还原时按需 patch - 注意监听时机：
input事件比keydown更稳妥（兼容粘贴、IME 输入）
let undoStack = [];
let redoStack = [];
function recordChange(change) {
undoStack.push(change);
redoStack = []; // 新操作清空 redo
}
function redo() {
if (redoStack.length === 0) return;
const change = redoStack.pop();
applyChange(change); // 自定义还原逻辑
undoStack.push(change); // 这步可选，取决于是否允许再次撤销该重做项
}
重做按钮禁用逻辑容易错在哪
很多人直接用 redoStack.length > 0 控制按钮 disabled，但漏掉了关键状态同步场景：
立即学习“前端免费学习笔记（深入）”；
- 用户撤销后立即输入新内容，
redoStack被清空，但按钮没及时变灰 - 异步操作（如远程保存成功后触发重做）未等待 DOM 更新完成就检查栈长
- 多个编辑区共用同一套栈，但按钮只监听了局部状态
- 没处理
Ctrl+Y/Cmd+Y快捷键，导致键盘操作和按钮状态不一致
重做不是加个按钮就能跑起来的事——它依赖你对“操作”的明确定义、对状态变化的精确捕获，以及对用户真实交互路径的预判。最常被跳过的，是撤销/重做后光标位置、焦点状态、滚动偏移的恢复。
