HTML Input：通过编程方式设置输入框值时撤销历史丢失问题

这个问题我太熟悉了——直接通过input.value = ...修改输入框内容时，浏览器不会把这次修改纳入原生的撤销/重做历史栈。原因很简单：浏览器的撤销栈只记录用户手动触发的输入操作，JS直接赋值相当于“硬覆盖”了输入框的状态，相当于重置了整个输入上下文，自然没法用Ctrl-Z回退。

下面给你两种靠谱的解决方案，都能让修改操作被纳入撤销历史：

方案一：使用setRangeText（推荐，现代浏览器支持） #

setRangeText是输入框元素的原生API，专门用于修改选中区域的文本，而且会自动将操作添加到撤销栈中。我们可以用它来替换整个输入框内容，同时保持光标位置：

<body>
  <input type="text" id="textbox" placeholder="Now with undo!"/><br/>
  <input type="text" id="textbox2" placeholder="Undo"/>
  <script>
    var tbx = document.getElementById("textbox");
    let isUpdating = false; // 防止循环触发input事件

    tbx.addEventListener('input', (e) => {
      if (isUpdating) return;
      isUpdating = true;

      // 避免重复添加句号（因为setRangeText会再次触发input事件）
      const newValue = tbx.value.endsWith('.') ? tbx.value : tbx.value + '.';
      // 替换整个内容，光标定位到末尾
      tbx.setRangeText(newValue, 0, tbx.value.length, 'end');

      isUpdating = false;
    });
  </script>
</body>

原理 #

setRangeText会模拟用户的编辑操作，浏览器会把这次修改记录到撤销栈里，所以你输入a变成a.后，按Ctrl-Z就能回退到a，再按一次回到空状态，完全符合预期。

方案二：使用document.execCommand（兼容性好，已标记废弃但仍可用） #

如果你需要兼容旧版浏览器，可以用document.execCommand的insertText命令，它同样会将操作纳入撤销历史：

<body>
  <input type="text" id="textbox" placeholder="Now with undo!"/><br/>
  <input type="text" id="textbox2" placeholder="Undo"/>
  <script>
    var tbx = document.getElementById("textbox");
    let isUpdating = false;

    tbx.addEventListener('input', (e) => {
      if (isUpdating) return;
      isUpdating = true;

      // 把光标移到输入框末尾
      tbx.selectionStart = tbx.selectionEnd = tbx.value.length;
      // 插入句号，这个操作会被记录到撤销栈
      document.execCommand('insertText', false, '.');

      isUpdating = false;
    });
  </script>
</body>

注意 #

虽然document.execCommand已经被MDN标记为废弃，但目前所有主流浏览器仍支持它，适合对兼容性要求极高的场景。

为什么直接赋值不行？ #

当你直接修改input.value时，浏览器会跳过内部的编辑历史记录逻辑，直接替换输入框的内容，相当于清空了之前的撤销栈状态。而上面两种方法都是通过浏览器的原生编辑接口修改内容，会触发正常的历史记录流程，所以撤销功能就能正常工作了。

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