Electron应用中renderer.js修改输入框内容后无法撤销的问题求助

首先纠正一个基础错误：<input>元素的内容应该通过value属性修改，而非innerText，后者无法正确更新输入框的可编辑内容，也是引发异常的原因之一。

问题根源 #

Electron的撤销/重做功能依赖Chromium的原生编辑命令系统，只有用户交互操作（手动输入、粘贴）或通过document.execCommand执行的编辑动作，才会被记录到撤销栈中。直接通过JS修改input.value属于DOM属性变更，不会触发Chromium的编辑历史记录，因此无法通过Ctrl+Z或webContents.undo()撤销，甚至会因撤销栈旧状态未被正确更新，出现旧内容追加的异常。

解决方案 #

方案1：用document.execCommand触发编辑历史 #

通过insertText命令修改输入框内容，该操作会被Chromium识别为合法编辑动作，自动加入撤销栈：

const input = document.getElementById("myinput");
// 先让输入框获得焦点，确保命令生效
input.focus();
// 执行插入文本命令，第三个参数为要插入的内容
document.execCommand('insertText', false, 'New input value.');

注：虽然document.execCommand在部分规范中被标记为过时，但Electron基于的Chromium仍完整支持该API，适合编辑场景使用。

方案2：手动维护撤销栈 #

如果需要更灵活的控制（比如自定义撤销逻辑），可以自己实现撤销/重做的状态管理：

const input = document.getElementById("myinput");
const undoStack = [];
let currentIndex = -1;

// 保存当前输入框状态到撤销栈
function saveCurrentState() {
  // 撤销后再输入时，清除当前索引之后的历史记录
  undoStack.splice(currentIndex + 1);
  undoStack.push(input.value);
  currentIndex++;
}

// 监听用户输入，自动保存状态
input.addEventListener('input', saveCurrentState);

// 通过JS修改输入框时，手动先保存状态
function updateInputValue(newValue) {
  saveCurrentState();
  input.value = newValue;
}

// 监听Ctrl+Z快捷键，处理撤销逻辑
document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 'z' && currentIndex > 0) {
    e.preventDefault(); // 阻止默认行为，避免冲突
    currentIndex--;
    input.value = undoStack[currentIndex];
  }
});

使用时调用updateInputValue('New input value.')修改内容，即可支持撤销。

方案3：结合Input Events API（进阶） #

通过构造并分发标准的input事件，模拟用户输入行为，需配合setRangeText处理选区逻辑，确保编辑历史被正确记录：

const input = document.getElementById("myinput");
input.focus();
// 选中输入框所有内容，模拟替换操作
input.setSelectionRange(0, input.value.length);
// 替换文本
input.setRangeText('New input value.');
// 分发input事件
input.dispatchEvent(new Event('input', { bubbles: true }));

这种方法更贴近原生输入行为，也能触发撤销栈记录，适合复杂编辑场景。

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