如何为网页各textarea设置独立undo buffer？Chrome等浏览器可行吗？

浏览器默认的撤销缓冲区是全局共享的，不同textarea之间的撤销操作会互相干扰，原生textarea本身并没有提供直接配置独立撤销缓冲区的API。不过可以通过两种方式实现需求：

一、自定义撤销逻辑（兼容所有现代浏览器） #

手动监听每个textarea的输入事件，维护各自的内容历史栈，再拦截键盘快捷键（Ctrl+Z/Ctrl+Y）来执行自定义的撤销/重做操作。

代码示例：

<html>
<body>
    <textarea id="textarea1"></textarea>
    <textarea id="textarea2"></textarea>

    <script>
        // 为每个textarea维护撤销栈和重做栈
        const undoStacks = new Map();
        const redoStacks = new Map();
        let currentEditingId = null;

        // 初始化每个textarea的栈结构
        document.querySelectorAll('textarea').forEach(textarea => {
            undoStacks.set(textarea.id, [textarea.value]);
            redoStacks.set(textarea.id, []);
            
            // 监听输入事件，记录内容到撤销栈
            textarea.addEventListener('input', () => {
                const stack = undoStacks.get(textarea.id);
                // 避免重复记录相同内容
                if (stack[stack.length - 1] !== textarea.value) {
                    stack.push(textarea.value);
                    // 输入新内容后清空重做栈
                    redoStacks.get(textarea.id).length = 0;
                }
            });

            // 监听焦点事件，标记当前编辑的textarea
            textarea.addEventListener('focus', () => {
                currentEditingId = textarea.id;
            });
        });

        // 拦截键盘快捷键，执行自定义撤销/重做
        document.addEventListener('keydown', (e) => {
            if (!currentEditingId) return;

            const isUndo = e.ctrlKey && e.key === 'z' && !e.shiftKey;
            const isRedo = (e.ctrlKey && e.shiftKey && e.key === 'Z') || (e.ctrlKey && e.key === 'y');

            if (isUndo || isRedo) {
                e.preventDefault();
                const undoStack = undoStacks.get(currentEditingId);
                const redoStack = redoStacks.get(currentEditingId);
                const textarea = document.getElementById(currentEditingId);

                if (isUndo && undoStack.length > 1) {
                    // 撤销：将当前内容移至重做栈，恢复上一状态
                    const currentValue = undoStack.pop();
                    redoStack.push(currentValue);
                    textarea.value = undoStack[undoStack.length - 1];
                } else if (isRedo && redoStack.length > 0) {
                    // 重做：将当前内容移至撤销栈，恢复重做栈顶部内容
                    const currentValue = undoStack[undoStack.length - 1];
                    undoStack.push(currentValue);
                    textarea.value = redoStack.pop();
                }
            }
        });
    </script>
</body>
</html>

该方案兼容性强，所有支持ES6的浏览器均可运行，但需要自行处理粘贴、快捷键输入等多种场景，逻辑相对繁琐。

二、利用UndoManager API（Chrome 116+ 及部分现代浏览器支持） #

Chrome 116及以上版本引入了UndoManager API，可为单个DOM元素绑定独立的撤销管理器。由于textarea不支持直接绑定该API，需使用contenteditable元素替代，实现原生级别的独立撤销/重做。

代码示例：

<html>
<body>
    <!-- 用contenteditable的div替代textarea，模拟文本域样式 -->
    <div id="editor1" contenteditable="true" style="border:1px solid #ccc; padding:8px; min-height:100px; resize:vertical; overflow:auto;"></div>
    <div id="editor2" contenteditable="true" style="border:1px solid #ccc; padding:8px; min-height:100px; margin-top:10px; resize:vertical; overflow:auto;"></div>

    <script>
        document.querySelectorAll('[contenteditable]').forEach(editor => {
            // 创建独立的UndoManager实例
            const undoManager = new UndoManager();
            editor.undoManager = undoManager;

            // 监听编辑事件，将操作添加到UndoManager
            editor.addEventListener('beforeinput', (e) => {
                const validTypes = ['insertText', 'deleteContentBackward', 'deleteContentForward', 'insertFromPaste'];
                if (!validTypes.includes(e.inputType)) return;

                const oldValue = editor.innerHTML;
                // 定义撤销操作
                const undo = () => {
                    editor.innerHTML = oldValue;
                };
                // 延迟获取新值，定义重做操作
                setTimeout(() => {
                    const newValue = editor.innerHTML;
                    const redo = () => {
                        editor.innerHTML = newValue;
                    };
                    undoManager.add({ undo, redo });
                }, 0);
            });

            // 拦截键盘快捷键，调用UndoManager的原生方法
            editor.addEventListener('keydown', (e) => {
                if (e.ctrlKey && e.key === 'z' && !e.shiftKey) {
                    e.preventDefault();
                    undoManager.undo();
                } else if ((e.ctrlKey && e.shiftKey && e.key === 'Z') || (e.ctrlKey && e.key === 'y')) {
                    e.preventDefault();
                    undoManager.redo();
                }
            });
        });
    </script>
</body>
</html>

该方案体验更接近原生，但仅支持Chrome 116+、Edge 116+等新版本浏览器，且需额外处理contenteditable元素的样式和内容格式问题。

总结 #

• 原生textarea无法直接实现独立撤销缓冲区，必须通过自定义逻辑或替代方案实现
• 自定义撤销逻辑兼容所有现代浏览器，但需自行维护历史栈并处理各类输入场景
• 利用UndoManager API可实现原生级独立撤销，但仅支持较新版本的Chrome/Edge，且需替换为contenteditable元素

内容的提问来源于stack exchange，提问作者foolo