要实现稳定可控的textarea撤销重做，必须手动维护undostack和redostack双栈结构，仅保存字符串快照，结合input/composition事件智能存档，并同步按钮与快捷键状态。
HTML文本域（textarea）本身支持浏览器原生的撤销/重做，但仅限用户直接输入、删除、粘贴等操作；一旦用 JavaScript 修改 value，原生栈就会清空。要实现稳定、可控、多步的历史记录栈，必须绕过原生依赖，手动维护状态快照和双栈结构。
核心是两个数组：undoStack 和 redoStack
每次有意义的编辑动作发生后，把当前文本内容深拷贝存入 undoStack，同时清空 redoStack；撤销时从 undoStack 弹出一项，推入 redoStack，并恢复到对应值；重做则反向操作。
- 不推荐直接存 DOM 或 innerHTML——
textarea没有 innerHTML，只用value - 快照只需保存字符串值（如
textarea.value），轻量且可比对 - 用
JSON.parse(JSON.stringify())做浅层深拷贝足够；含特殊字符也不影响 - 设上限（如最多 50 步），超限时用
shift()踢掉最早一条，防内存膨胀
关键时机：什么时候存快照？
不能每按一个键都存（太频繁），也不能只在失去焦点时存（会丢中间步骤）。应结合事件与语义粒度判断：
- 监听
input事件——它是内容变化最可靠的信号 - 中文输入法下，需额外监听
compositionstart和compositionend，只在结束时存，避免把“拼音过程”误当有效操作 - 可加简单节流（如 300ms 内连续输入只存一次），避免打字过程中生成大量重复快照
- JS 主动赋值（如自动填充、格式化）后，必须手动调用
saveState()，否则该步不可撤销
按钮与快捷键要同步状态
撤销/重做按钮是否可用，不能只看栈长度，还要响应用户真实行为：
- 绑定
Ctrl+Z/Ctrl+Y（Mac 为Cmd），和点击按钮执行同一套逻辑 - 每次新操作后，重做按钮立即禁用（
redoStack.length === 0） - 撤销后若用户又输入，
redoStack清空，按钮状态要实时更新 - 避免异步场景（如远程加载后还原内容）中未等 DOM 更新就检查栈长，导致按钮状态滞后
光标位置要不要管？
纯文本域场景下，一般不需要主动保存和恢复光标——浏览器在设置 value 后会默认将光标置于末尾；如果要求精确还原（比如编辑中途撤销），就得额外记录 selectionStart 和 selectionEnd，并在恢复时手动设置：
- 快照结构可扩展为：
{ value: 'xxx', start: 5, end: 5 } - 恢复时先赋值，再调用
textarea.setSelectionRange(start, end) - 注意：设置选区前确保元素已聚焦（
textarea.focus()）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
