JavaScript中复制文本用Clipboard API（如writeText），需用户手势触发；回退历史用history.pushState存状态、popstate监听导航；撤销重做需自行维护操作栈，三者技术路径不同但可组合使用。
JavaScript 中实现文本复制和回退历史记录是两个独立但常被一起关注的功能。复制文本靠 Clipboard API（现代标准）或兼容方案；回退历史记录则依赖浏览器的 history API，与页面跳转或状态变更相关，不直接管理“文本内容”的撤销/重做。下面分两部分说明核心实现方式和注意事项。
复制文本：用 Clipboard API 写入系统剪贴板
推荐使用异步的 navigator.clipboard.writeText()，它支持现代浏览器（Chrome 66+、Firefox 63+、Edge 79+、Safari 16.4+），无需依赖 input/textarea 模拟。
- 基本写法：
navigator.clipboard.writeText("要复制的文本")
.then(() => console.log("复制成功"))
.catch(err => console.error("复制失败:", err)); - 必须在用户手势触发的上下文中调用（如 click、keydown），否则会拒绝权限（SecurityError）。
- 若需兼容旧浏览器（如 IE 或早期移动端），可降级使用
document.execCommand("copy")：先创建临时<textarea></textarea>，选中内容，再执行命令——但该方法已废弃，仅作兜底。
回退历史记录：用 history.pushState() 和 popstate 事件管理状态
浏览器历史栈本身不存储“文本”，但你可以把文本内容作为状态对象存入历史记录，配合 pushState() 和 replaceState() 实现类似“撤销编辑”的体验。
- 保存当前文本到历史：
history.pushState({ text: currentText }, "", null);
这会在历史栈中新增一条记录，不刷新页面，URL 可选传入（第三个参数）。 - 监听用户点击「后退」或「前进」：
window.addEventListener("popstate", (event) => {
if (event.state && "text" in event.state) {
inputElement.value = event.state.text;
}
}); - 注意：
popstate仅在用户主动导航（如点击浏览器后退按钮、调用history.back()）时触发，不会因pushState自动触发。
补充：真正的“文本撤销/重做”需自行维护操作栈
如果目标是像编辑器那样按 Ctrl+Z 撤销上一步输入，这不属于浏览器历史机制范畴，而应由 JS 自行实现：
立即学习“Java免费学习笔记（深入）”；
- 维护一个数组（如
undoStack）保存每次有效编辑前的状态； - 每次修改文本前，把当前值
push进栈； - 触发撤销时，从栈中
pop()上一个值并还原到编辑区； - 可搭配
keydown监听 Ctrl+Z / Ctrl+Y，并调用对应函数。
小结：别混淆“浏览器历史”和“编辑历史”
复制文本是跨应用的数据传递行为，靠 Clipboard API；回退历史记录本质是页面导航状态管理，靠 history API；而文本的撤销重做属于业务逻辑，需手动设计状态栈。三者目的不同、技术路径不同，实际项目中往往需要组合使用——比如在富文本编辑器里，既用 pushState 记录关键编辑点，又用本地栈支持细粒度撤销，同时提供一键复制当前内容功能。
