网页多输入框下撤销重做操作的优化方案

在多输入框的网页应用中，撤销(Undo)和重做(Redo)操作容易变得混乱，因为浏览器默认的撤销栈是基于整个页面的，而非单个输入框。以下是几种解决方案：

1. 实现独立的撤销栈

为每个输入框维护独立的撤销历史：

class InputHistory {
  constructor(inputElement) {
    this.input = inputElement;
    this.history = [''];
    this.position = 0;

    inputElement.addEventListener('input', () => {
      this.record();
    });
  }

  record() {
    // 移除当前位置之后的历史
    this.history = this.history.slice(0, this.position + 1);
    // 添加新状态
    this.history.push(this.input.value);
    this.position++;
  }

  undo() {
    if (this.position > 0) {
      this.position--;
      this.input.value = this.history[this.position];
    }
  }

  redo() {
    if (this.position < this.history.length - 1) {
      this.position++;
      this.input.value = this.history[this.position];
    }
  }
}

// 为每个输入框创建实例
document.querySelectorAll('input, textarea').forEach(input => {
  const history = new InputHistory(input);
  // 可以绑定到特定快捷键
});

2. 使用ContentEditable替代输入框

对于复杂场景，使用contenteditable div并实现自定义的撤销管理：

document.querySelector('.editable').addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 'z') {
    e.preventDefault();
    // 执行自定义撤销逻辑
  }
  if (e.ctrlKey && e.key === 'y') {
    e.preventDefault();
    // 执行自定义重做逻辑
  }
});

3. 使用现成的库

考虑使用成熟的库来管理撤销重做：

• Tiptap (基于ProseMirror)
• Draft.js
• Slate
• UndoManager

4. 上下文感知的撤销

跟踪用户最后操作的输入框，只撤销该输入框的内容：

let lastActiveInput = null;

document.querySelectorAll('input, textarea').forEach(input => {
  input.addEventListener('focus', () => {
    lastActiveInput = input;
  });
});

document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 'z' && lastActiveInput) {
    e.preventDefault();
    // 执行lastActiveInput的撤销逻辑
  }
});

5. 视觉反馈

提供清晰的视觉反馈，显示哪个输入框的撤销重做将被执行：

.input-with-undo-focus {
  box-shadow: 0 0 0 2px #4a90e2;
  transition: box-shadow 0.3s ease;
}

最佳实践建议

1. 明确范围：让用户清楚撤销操作是针对当前字段还是整个表单
2. 快捷键一致性：保持Ctrl+Z/Y(Windows)或Cmd+Z/Y(Mac)的标准
3. 状态指示：对于无法撤销/重做的状态，禁用相应按钮或提供视觉提示
4. 性能考虑：对于大型表单，考虑限制历史记录长度或使用差异算法
5. 移动端支持：在移动设备上提供明确的撤销/重做按钮

选择哪种方案取决于您的具体需求、应用复杂度和性能要求。