JavaScript实现textarea支持tab输入后ctrl+z撤销功能失效如何解决

问题本质 #

直接修改textarea.value属于脚本层面的属性赋值，没有走浏览器原生输入事件流，不会被计入浏览器内置的撤销栈，因此会导致ctrl+z撤销功能失效。

符合现代Web规范的实现方案 #

方案一：基于setRangeText+手动维护撤销栈（无废弃API调用） #

完全符合W3C最新标准，兼容所有现代浏览器

const textarea = document.querySelector('textarea');
// 撤销/重做栈存储历史状态
const undoStack = [];
const redoStack = [];
let isUndoRedoOperating = false;

// 捕获Tab按键事件
textarea.addEventListener('keydown', (e) => {
  // 处理普通Tab缩进
  if (e.key === 'Tab' && !e.shiftKey && !e.ctrlKey && !e.altKey) {
    e.preventDefault();
    // 非撤销操作时不额外记录当前状态入撤销栈
    if (!isUndoRedoOperating) {
      undoStack.push({
        value: textarea.value,
        selectionStart: textarea.selectionStart,
        selectionEnd: textarea.selectionEnd
      });
      redoStack.length = 0;
    }
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    // 选中区域插入Tab字符
    textarea.setRangeText('\t', start, end, 'end');
    // 调整光标位置到插入字符后
    textarea.selectionStart = textarea.selectionEnd = start + 1;
  }

  // 接管ctrl+z撤销逻辑
  if (e.ctrlKey && e.key.toLowerCase() === 'z' && !e.shiftKey) {
    e.preventDefault();
    if (undoStack.length <= 0) return;
    isUndoRedoOperating = true;
    const prevState = undoStack.pop();
    redoStack.push({
      value: textarea.value,
      selectionStart: textarea.selectionStart,
      selectionEnd: textarea.selectionEnd
    });
    textarea.value = prevState.value;
    textarea.selectionStart = prevState.selectionStart;
    textarea.selectionEnd = prevState.selectionEnd;
    isUndoRedoOperating = false;
  }

  // 接管ctrl+y/ctrl+shift+z重做逻辑
  if ((e.ctrlKey && e.key.toLowerCase() === 'z' && e.shiftKey) || (e.ctrlKey && e.key.toLowerCase() === 'y') {
    e.preventDefault();
    if (redoStack.length <= 0) return;
    isUndoRedoOperating = true;
    const nextState = redoStack.pop();
    undoStack.push({
      value: textarea.value,
      selectionStart: textarea.selectionStart,
      selectionEnd: textarea.selectionEnd
    });
    textarea.value = nextState.value;
    textarea.selectionStart = nextState.selectionStart;
    textarea.selectionEnd = nextState.selectionEnd;
    isUndoRedoOperating = false;
  }
});

方案二：兼容优先简化方案 #

document.execCommand虽然已被标记为废弃，但目前所有主流桌面、移动端浏览器都保留了完整实现，生产环境可用，实现代码更简洁，自动复用浏览器原生撤销栈，无需手动维护：

const textarea = document.querySelector('textarea');
textarea.addEventListener('keydown', (e) => {
  if (e.key === 'Tab') {
    e.preventDefault();
    document.execCommand('insertText', false, '\t');
  }
});

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